angular - 如何在 Angular 4.3 中使用 HttpClient 的两个实例(一个有 2 个拦截器，另一个有 1 个拦截器)？

Question

在我们的 Angular 4.3 项目中，我们分别拥有公共(public)站点组件和安全站点(登录)组件。我们使用@angular/common/http。我们希望为 public-site 组件和 secured-site 组件实现不同的 http 拦截器。例如，

1. 公共(public)站点组件 - 仅适用于拦截器下面
   日志拦截器
2. 安全站点组件 - 应用以下两个拦截器
   日志拦截器
AuthTokenInterceptor(在请求 header 中传递身份验证 token )

我们尝试使用不同的拦截器在每个组件级别 @Component 添加提供程序详细信息 HTTP_INTERCEPTORS。但请求不会进入任何拦截器。

仅当我们在 @NgModule 中添加提供者详细信息 HTTP_INTERCEPTORS 时，请求才会进入拦截器。这里的问题是，公共(public)站点http请求也会进入不需要的AuthTokenInterceptor。

那么我们应该如何解决这个问题呢？谢谢。

Answer 1

您不需要两个 HttpClient 实例作为拦截器在每个 http 请求上反复应用。

我不知道您如何处理我们应用程序的状态，基于此您只需在拦截器中添加一些条件，该条件将决定当前请求是否发生变化。这样，如果请求是从公共(public)站点组件触发的，则不会附加授权 header 。例如:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if ('your condition here if public-site components') {
        // Just return original request
        return next.handle(req);
    } else {
        // Here return modified one
        // Get the auth header from the service.
        const authHeader = this.auth.getAuthorizationHeader();
        // Clone the request to add the new header.
        const authReq = req.clone({headers: req.headers.set('Authorization', authHeader)});
        // Pass on the cloned request instead of the original request.
        return next.handle(authReq);
     }

   }

如果您不想将 Authorization header 发送到特定的 api/url，只需使用 req.url 对其设置过滤器。