数据服务构建中的同步 HTTP Angular 6答案

【问题标题】：Syncronous HTTP Angular 6 in data service construction数据服务构建中的同步 HTTP Angular 6
【发布时间】：2018-08-02 01:23:48
【问题描述】：

当用户从菜单中选择一个较大的应用程序时，我的应用程序正在被延迟加载。此时用户已经通过身份验证并具有适当的角色，但由于组应用程序中的分段，我仍然必须通过将用户名和特殊密钥发送到服务器来对用户进行半身份验证，然后我得到一个令牌。

必须先加载该令牌，然后我才能执行任何其他数据请求。现在我有一个数据服务，它的构造函数的一部分进行了这个登录。不幸的是，因为 http 客户端是异步的，这意味着我的应用程序中加载的第一个组件无法进行数据调用，因为此时数据服务刚刚创建......

我应该从哪里获得这个令牌以避免这种情况？

【问题讨论】：

我不认为执行同步 HTTP 调用是您问题的真正解决方案，不知道这是否真的可行。但是，您的通用“dataService”或“apiService”不应该是您的延迟加载模块重用的全局单例吗？如果该服务负责身份验证，则您的延迟加载模块只需要使用它们的“dataService”。 ItemResourceService，不关心实际的rest通信是如何发生的（或者服务器的绝对路径是什么）
这个 api 服务连接到我们单独的服务器并进行身份验证。用于收集数据的完全不同的不同服务器。我根本不能使用他们的身份验证或数据服务，只能说用户在到达我的时候已经过身份验证。我现在的想法是让组件首先被转储，这是一个启动屏幕，当服务准备好时重定向到需要组件的数据。不过，我对 Angular 还很陌生，所以我只是不确定如何以“正确的方式”处理这个问题

标签： angular

【解决方案1】：

我相信您正在寻找的是 HttpInterceptor。

首先，您需要创建一个简单的 HTTP 拦截器as described in the official docs。然后，您可以在进行任何 API 调用之前检查该令牌是否存在于拦截器中，并使用 flatMap 依次运行您的调用，如 here 所述。

完成这些之后，您会发现只有在身份验证调用完成后才会发出 http 请求。

对于相同的要求，在 Angular 的 HTTPInterceptor 版本 4.3 之前，我必须创建一个 CustomHttpClient，其中注入了 Angular 的 HttpClient。为了确保在检索到身份验证令牌之前不会进行 http 调用， app 只会通过这个中间的 CustomHttpClient 进行 http 调用。完成此步骤还允许操作 Http 调用，这基本上是对 Angular 的新 HttpInterceptor 的“自制”——https://stackoverflow.com/a/34465070/5116121

【讨论】：