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

Question

我在 Angular 5 中使用 HTTPInterceptor 功能。它在克隆 http 请求并发送到服务器（后端服务器）时按预期工作。我只从 HTTPInterceptor 显示和隐藏应用程序加载器，这也工作正常，但我对一个 GET 请求使用了轮询，它每 5 秒从后端服务器获取数据，这让用户很恼火。那么，有什么方法可以检查 HTTPInterceptor 中的特定请求吗？并且也不允许 show/hide 根据该请求加载程序。

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

  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();
      });
  };

提前致谢。

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);
  }

Answer 2

您可以根据您的 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);
}

希望对您有所帮助。

Answer 3

我们可以通过上面的方式来做，比如在拦截器本身中检查 URL，但是稍后如果我们修改 URL，比如 login 登录，signup 加入或 so.This如果我们有多个类型的 logins/un-authenticated 页面，实现方式将导致侧 effect.Or 重载拦截器。

所以我建议我们可以使用来自 login/signup 种服务的用户定义 "InterceptorSkipHeader"

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

并且在拦截器中，您可以使用这些 header 检查请求并排除身份验证

    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);
    }

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

How to identify specific request came at HTTP Interceptor using Angular 5?

interceptor

observable

angular