如何使用Angular 5识别HTTP拦截器中的特定请求？

Question

我正在使用 Angular 5 中的 HTTPInterceptor 功能。在将 http 请求克隆并发送到服务器（后端服务器）时，它按预期工作。我仅在 HTTPInterceptor 中显示和隐藏应用程序加载器，这也很好地运行了。但是，在一个 GET 请求上我使用了轮询，每 5 秒从后端服务器获取数据，这使得用户感到烦恼。因此，是否有一种方法可以检查 HTTPInterceptor 中的特定请求？并且不允许在该请求中显示/隐藏加载器。

以下是拦截函数的当前代码片段：

  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.loadingIndicatorService.showLoader();
    this.customAuthorizationHeader();
    const apiRequest = req.clone({headers:this.headers});
    return next.handle(apiRequest).do
    ((response) => {
        if (response instanceof HttpResponse) {
          this.loadingIndicatorService.hideLoader();
        }
      },
      (error) => {
        this.loadingIndicatorService.hideLoader();
      });
  };

预先感谢您。

- Chandan

---

你看过 HttpRequest 的 req 参数里面有什么吗？也许那里面有一些能帮助你的东西。 - R. Richards

Answer 1

您可以检查req.url是否等于您想要排除的路径，如下：

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // put this before your current code
    if (req.url.indexOf('/* the api path you want to exclude*/') === -1) {
      return next.handle(req);
    }
    // do your stuff here.
    return next.handle(req);
  }

- Envil

Answer 2

我们可以在拦截器中检查 URL 的方式来实现，但是如果稍后我们修改 URL，比如将登录（login）改为登录（sign in），注册（signup）改为加入（join）等。这种实现方式会导致副作用。或者，如果我们有多种类型的登录/未经身份验证的页面，则会超载拦截器。

因此，我建议我们可以使用用户自定义的“InterceptorSkipHeader”来处理类似于登录/注册的服务。

unAuthenticatedAPI(someUrl){
    const headers = new HttpHeaders().set(InterceptorSkipHeader, '');
    this.httpClient.get<ResponseType>(someUrl, { headers });
}

在拦截器中，您只需检查具有这些标头的请求并排除身份验证

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {    
       if (!req.headers.has(InterceptorSkipHeader)) {
         // set token here.
         const apiRequest = req.clone({headers:this.headers})
       }    
       return next.handle(req);
    }

- Nambi N Rajan

Answer 3

您可以根据您的req.url添加条件，例如：

intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!req.url.includes('/some/url-to-be-escaped') {
        // Do nothing
        return next.handle(req);
    }

    this.loadingIndicatorService.showLoader();
    this.customAuthorizationHeader();
    const apiRequest = req.clone({headers:this.headers});
    // The rest of your stuff

    return next.handle(req);
}

希望这有所帮助。

- Laiso

---

这是一个很好的解决方案，但是我想补充一点，在IE 11上“includes”不起作用，所以你可能需要使用“some”。 - mynameisx