Angular中JWT认证下401未授权检测及重定向问题咨询

我来帮你搞定这个401重定向的问题！你已经有了AuthService和JWT拦截器，核心就是在拦截器里捕获API返回的401错误，然后结合你的服务完成登出和跳转操作。下面一步步来：

1. 完善你的AuthService #

首先确保你的auth.service.ts包含清除token和跳转登录的方法（如果还没有的话）：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  // 你的现有方法：login(), getToken()...

  constructor(private router: Router) {}

  // 添加登出方法：清除token并跳转登录页
  logout(): void {
    // 根据你的存储方式清除token（比如localStorage/sessionStorage）
    localStorage.removeItem('token');
    // 跳转到登录页，路径根据你的路由配置调整
    this.router.navigate(['/login']);
  }
}

2. 修改JWT拦截器捕获401错误 #

在你的jwt.interceptor.ts中，添加响应错误处理逻辑，专门捕获401状态码并触发登出：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpInterceptor,
  HttpErrorResponse
} from '@angular/common/http';
import { catchError, throwError } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler) {
    // 你的现有逻辑：给请求头添加token
    const token = this.authService.getToken();
    if (token) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }

    // 新增响应错误捕获逻辑
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // 检测到401未授权错误时触发登出
        if (error.status === 401) {
          this.authService.logout();
        }
        // 重新抛出错误，让调用方可以根据需要处理（可选）
        return throwError(() => error);
      })
    );
  }
}

3. 确保拦截器在模块中正确注册 #

打开app.module.ts，确认拦截器已经被添加到providers数组中，这样Angular才能全局使用它：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { JwtInterceptor } from './jwt.interceptor';

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JwtInterceptor,
      multi: true // 允许多个拦截器同时工作
    }
  ],
  // ...其他模块配置
})
export class AppModule {}

4. 可选优化：避免重复跳转 #

如果同时有多个请求返回401，可能会触发多次跳转操作。你可以在AuthService里加一个标志位来避免这种情况：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private isLoggingOut = false;

  constructor(private router: Router) {}

  logout(): void {
    if (this.isLoggingOut) return;
    this.isLoggingOut = true;

    localStorage.removeItem('token');
    this.router.navigate(['/login']).finally(() => {
      this.isLoggingOut = false;
    });
  }

  // ...其他现有方法
}

现在测试一下，当API返回401状态码时，应该会自动清除token并跳转到登录页了。如果还有问题，可以检查：

• 确认API确实返回了401状态码（可以在浏览器开发者工具的Network标签里查看请求响应）
• 确保你的路由配置中/login路径是正确的
• 检查token的存储和getToken()方法的逻辑是否正常

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