页面刷新后，HttpInterceptor 未向后续请求添加新令牌

Question

我在我的应用程序中使用拦截器，当令牌过期（返回 401）时，我想刷新令牌，将新令牌保存到 localstorage，然后使用新令牌继续请求。

捕获 401 错误有效，我能够获取新令牌，但请求仍然失败并出现 401 并且不起作用直到我刷新页面。

这是当前使用的拦截方法的代码：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  console.log('Interceptor called===============>');
  const token = localStorage.getItem(environment.TOKEN_NAME);

  if (token) {
    const headers = { Authorization: `Bearer ${token}` };
    Object.keys(AppHttpInterceptor.headers).forEach((header) => {
      // @ts-ignore
      if (!AppHttpInterceptor.headers[header]) {
        return;
      }
      // @ts-ignore
      headers[header] = AppHttpInterceptor.headers[header];
    });
    request = request.clone({ setHeaders: headers });
  }
  const handled: Observable<HttpEvent<any>> = next.handle(request);
  const subject: AsyncSubject<HttpEvent<any>> = new AsyncSubject();
  handled.subscribe(subject);
  subject.subscribe((event: HttpEvent<any>) => {
    if (event instanceof HttpErrorResponse) {
      if (event.status === 401) {
        return;
      }

      this.httpError.emit(event);
    }
  }, (err: HttpEvent<any>) => {
    if (err instanceof HttpErrorResponse) {
      if (err.status === 401) {
        this.tokenRefreshService.refreshToken().subscribe(response => {
          const headers = { Authorization: `Bearer ${localStorage.getItem(environment.TOKEN_NAME)}` };
          console.log('HEADERS ======> ' + headers);
          // @ts-ignore
          Object.keys(AppHttpInterceptor.headers).forEach((header) => {
            // @ts-ignore
            if (!AppHttpInterceptor.headers[header]) {
              return;
            }
            // @ts-ignore
            headers[header] = AppHttpInterceptor.headers[header];
          });
          request = request.clone({ setHeaders: headers });
        });

        return;
      }
      if (err.status === 404) {
        return;
      }
      this.httpError.emit(err);
    }
  });
  return Observable.create((obs: Observer<HttpEvent<any>>) => {
    subject.subscribe(obs);
  });
}

这是正确的方法吗？

Answer 1

我可以在您的代码中看到 2 个非常小的问题，这可能是它不添加新令牌的原因，除非您刷新。

1. 当状态为 404 时，您不会返回任何您拥有的 null 返回

2. 你在第一次克隆时更新了它自己的初始请求，我 建议您保持初始请求参数不变，并且 还可以处理刷新令牌失败的情况。

       intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
         console.log('Interceptor called===============>');
         const token = localStorage.getItem(environment.TOKEN_NAME);
         if (token) {
           const headers = {Authorization: `Bearer ${token}`};
           Object.keys(AppHttpInterceptor.headers).forEach((header) => {
             // @ts-ignore
             if (!AppHttpInterceptor.headers[header]) {
               return;
             }
             // @ts-ignore
             headers[header] = AppHttpInterceptor.headers[header];
           });
          const  request = req.clone({setHeaders: headers}); // created  a new one intial req is not updated
         }
   
   
   
         return next.handle(request).pipe(catchError(error =>{
           if(error instanceof HttpErrorResponse){
             console.log((<HttpErrorResponse>error));
   
             if((<HttpErrorResponse>error).status === 401 && (<HttpErrorResponse>error).error.console.error_description.indexOf("Invalid refresh token" >= 0)){
               return observableThrowError(error); // if refresh token is exptired
             }
             if((<HttpErrorResponse>error).status === 401 && (<HttpErrorResponse>error).error.console.error_description.indexOf("Invalid_token" >= 0)){
               return this.handle401Error(req, next); //passing initial request
             }
   
   
             return observableThrowError(error);
           }
         }));
   
         handle401Error(req: HttpRequest<any>, next: HttpHandler){
   
           return  this.tokenRefreshService.refreshToken().pipe(
             switchMap(() =>{
               const headers = {Authorization: `Bearer ${localStorage.getItem(environment.TOKEN_NAME)}`};
               const newRequest =  req.clone({setHeaders: headers });
               return next.handle(newRequest); // return a new handle it will create a new request with updated header data
             }),
             catchError(error =>{
               retun observableThrowError(error);
             }),
             finalize(() =>{
                // some extra lines
             }) // import the token service
           )
         }
   
       }
   

如果这能解决您的问题，请告诉我。 谢谢！

Answer 2

捕获 401 错误有效，我能够获得一个新令牌，但 请求仍然失败并出现 401 并且在我刷新之前不起作用 页面。

获得新令牌后，您再次发送旧（过期）令牌或拦截器不知道要发送新令牌。我看不到处理（替换）新令牌的正确方法。调用刷新令牌API后如何替换旧令牌？

我们来看看拦截器的完整实现的详细图：

如您所见，拦截器是客户端请求和服务器之间的中间件，具有循环实现。您的拦截器是以一种奇怪的方式制作的，具有循环行为。任何更改都应立即并在其中故意进行，否则会干扰应用程序的行为。至少，你应该让拦截器删除/替换过期令牌本身处理401状态码，虽然我们可以设置 外部标记（在服务甚至组件内部）！

这是拦截器实现的简单干净的逻辑：

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (token) {
      // addToken to request
    }

    return next.handle(request).pipe(catchError(error => {
      if (error instanceof HttpErrorResponse && error.status === 401) {
        // handle401Error
      } else {
        // throwError
      }
    }));
  }
}

有两种更新令牌的方法，您可以根据您的应用程序工作模型选择：

• 直接使用localStorage 命令，包括 localStorage.removeItem(environment.TOKEN_NAME)
• 利用BehaviorSubject 包装上述内容，这是首选交易 带有刷新令牌的应用程序。阅读Angular JWT Authorization with Refresh Token and Http Interceptor 进行清洁 使用BehaviorSubject 实现。

更新：仔细查看以调试您的方法

您使用的是AsyncSubject 而不是BehaviorSubject，那么有什么区别？实际上，AsyncSubject 的工作方式有点不同，其中只有 Observable 执行的最后一个值被发送给它的订阅者，并且只有在执行完成时。因此，使用AsyncSubject 来实现拦截器并不普遍。

例如，在以下步骤中，使用 AsyncSubject 没有任何反应：

1. 我们创建AsyncSubject
2. 我们通过订阅者 A 订阅主题
3. Subject 发出 3 个值，仍然 没有任何反应
4. 我们通过订阅者 B 订阅主题
5. Subject 发出一个新值，仍然没有任何反应
6. 主题完成。现在这些值被发送到 都记录值的订阅者。

让我们回到您的代码。您订阅AsyncSubject 的唯一线路是subject.subscribe(obs);。以这种方式使用AsyncSubject只会增加拦截器的延迟。我不确定，但您可以通过更多工作来解决您的方法，也许是通过以下方式，然后是我上面提到的逻辑：

next.handle(request).do(event => {
    if (event instanceof HttpResponse) {
        subject.next(event);
        subject.complete();
    }
}).subscribe(); // must subscribe to actually kick off request!
return subject;

Answer 3

您需要重新考虑您对可观察对象的方法，并将其视为您链接的流，类似这样

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
            return from(this.authenticationService.getAuthenticationToken()
                .then(token => {
                    return req.clone({
                        setHeaders: {
                            Authorization: `Bearer ${token}`
                        }
                    });
                })
                .catch(err => {
                    this.authenticationService.ErrorHandler(err);
                    return req;
                }))
                .switchMap(req => {
                    return next.handle(req);
                });
        }