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

谢谢。

Answer 1

您可以像这样基于您的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 2

您可以检查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 3

我们可以通过上述方式进行操作，例如检查拦截器本身中的URL，但是稍后如果我们修改URL（例如登录以登录，然后注册加入），则这种方式会产生副作用。或者使拦截器过载如果我们有多种类型的登录名/未经身份验证的页面。

所以我建议我们可以从登录/注册类型的服务中使用用户定义的“ 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);
    }

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

3 个答案: