Question

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

公共站点组件 - 仅在拦截器下方应用 LoggingInterceptor
安全站点组件 - 应用于两个拦截器以下
LoggingInterceptor
AuthTokenInterceptor（在请求标头中传递身份验证令牌）

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

只有在HTTP_INTERCEPTORS中添加提供商详细信息@NgModule时，请求才会进入拦截器。问题在于，公共站点的http请求也会进入AuthTokenInterceptor，这是不需要的。

那我们该如何解决呢？感谢。

Answer 1

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

我不知道你是如何处理我们的应用程序的状态，基于你可以在你的拦截器中放入一些条件来决定当前请求是否应该变异。这种方式，如果请求从public-site components触发，它就不会附加Authorization标头。 e.g：

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标题发送到特定api/url，只需使用req.url为其设置过滤器即可。

如何在Angular 4.3中使用两个HttpClient实例（一个有2个拦截器，另一个带有1个拦截器）？

1 个答案: