Auth0/angular-jwt中token过期触发401后未跳转登录页如何解决

我在Angular应用中使用最新版本的@auth0/angular-jwt，测试客户端token过期场景时，提交表单到服务端后，服务端因token过期返回401错误码。我在客户端代码中添加了捕获401错误后跳转登录页的逻辑，但实际触发时并未成功跳转，想咨询是哪里配置或代码逻辑有遗漏？以下是我的组件类、服务类代码，以及提交表单时的浏览器控制台截图：

组件类代码 #

onSubmit() {
    if (this.form.valid) {

      this.coreService.createNewJob(this.form.value).pipe(
        tap((response) => console.log('tap response: ',response))
        )
        .subscribe(
        (response) => {
          this.form.reset();
          this.router.navigate(['/print']);
        },
        (error) => {
          console.log('Something went wrong : the Job wasn\'t saved.', error);
        }
      );
    }
  }

服务类代码 #

createNewJob(payload:IJob): Observable<IJob>{
       console.log('Payload being sent to server for new Job: ',payload.productGTIN);

       return this.httpClient.post<IJob>(environment.restUrl+'/newjob',payload)
       .pipe(
           tap(data => console.log('All: ', JSON.stringify(data))),
           catchError(this.handleError)
         );    
   }
 
 
 private handleError(err: HttpErrorResponse): Observable<never> {
       let errorMessage = '';
       if (err.error instanceof ErrorEvent) {
         // 客户端或网络错误
         errorMessage = `An error occurred: ${err.error.message}`;
       } else {
         // 后端返回非成功状态码
         errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;

         if(err.status == 401)
         {
           console.error('Inside 401 error so redirect to login page ',errorMessage);
           this.router.navigate(['/session/login']);
           
         }
       }
       console.error('inside core handleerror() ');
       return throwError(errorMessage);
     }

提交表单时的浏览器控制台截图 #

（原截图已省略）

你遇到的跳转失效最核心的原因是handleError方法的this上下文丢失，导致this.router指向异常，跳转逻辑没有实际触发：
你在catchError中直接传入this.handleError时，普通函数的this会跟随调用方变化，被RxJS内部调用时this已经不再指向你的coreService实例，自然无法调用路由实例的navigate方法。

修复方式（二选一即可） #

1. 直接绑定this上下文
   修改服务类中catchError的传参：

   catchError(this.handleError.bind(this))
   

2. 将handleError改为箭头函数，固定this指向

   private handleError = (err: HttpErrorResponse): Observable<never> => {
     // 原有逻辑保持不变
   }
   

可选优化建议 #

• 推荐使用Angular的HttpInterceptor全局统一处理401错误，不需要每个请求单独写错误判断逻辑，避免遗漏：
  你可以自定义一个全局拦截器，所有HTTP请求返回401时统一触发跳转逻辑，代码可维护性更高。
• 确认/session/login路由已在路由模块中正确注册，且没有路由守卫拦截该跳转路径。
• 检查@auth0/angular-jwt的配置，若开启了token自动刷新功能，需要确认刷新失败后才会抛出401错误到你的自定义错误处理逻辑中。

内容的提问来源于stack exchange，提问作者ZAJ