Angular拦截器如何防止重复请求？

Question

我有一个interceptor ，它拦截从200 OK消息接收到的401错误代码。

不幸的是，我无法修改API服务器以返回401错误而不是带有错误代码的200 OK 。

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request).pipe(
  switchMap((result: any) => {
    //401 unauthorized error message
    if (result && result.body && result.body.isSuccess == false && result.body.errorCode == '401') {
      return this.unAuthorizedError(request, next);
    } else {
      return next.handle(request);
    }
  }),
  catchError((error) => {
    if (error instanceof HttpErrorResponse) {
      switch ((<HttpErrorResponse>error).status) {
        case 401:
        case 403:
          return this.unAuthorizedError(request, next);
        default:
          break;
      }
    }
    return throwError(error);
  })
);
}

问题是每个请求都发送了两次，我认为这可能是由于返回next.handle(request)的switchMap方法。

我尝试了tap方法

 tap((result: any) => {
    //401 unauthorized error message
    if (result && result.body && result.body.isSuccess == false && result.body.errorCode == '401') {
      return this.unAuthorizedError(request, next);
    }
  }),

它只发送一次请求，但是当令牌过期时，不会调用this.unAuthorizedError(request, next) 。

Answer 1

我认为你是对的，什么next.handle(request); 做的是再次提出请求。

当创建switchMap的内部可观察对象时，您已经有了一个响应，所以我想说您可以用of(response)替换next.handle() ) 以便它可以由发起请求的部分使用：

/* ... */
return next.handle(request).pipe(
  switchMap((result: any) => {
    //401 unauthorized error message
    if (result && result.body && result.body.isSuccess == false && result.body.errorCode == '401') {
      return this.unAuthorizedError(request, next);
    } else {
      return of(result);
    }
  }),
)
/* ... */

我写了一篇关于 Angular 的HTTPClientModule的文章， 这里是我谈论拦截器的部分。