Angular应用中主动处理Bearer Token过期：提升用户体验与安全性

npm install jwt-decode

import { Injectable } from from '@angular/core';
import { Router } from '@angular/router';
import jwt_decode from 'jwt-decode';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private logoutTimeoutId: any; // 用于存储setTimeout的ID

  constructor(private router: Router) { }

  /**
   * 更新客户端的登出计时器
   * @param token JWT字符串
   */
  public updateLogoutCounter(token: string): void {
    if (!token) {
      this.clearLogoutCounter();
      return;
    }

    try {
      const decodedToken: any = jwt_decode(token);
      // exp 是 Unix 时间戳 (秒)
      const expirationTimeInSeconds = decodedToken.exp;
      // 将其转换为毫秒，并减去当前时间，得到剩余毫秒数
      const currentTimeInSeconds = Math.floor(Date.now() / 1000);
      const expiresInMilliseconds = (expirationTimeInSeconds - currentTimeInSeconds) * 1000;

      // 如果Token已经过期或即将过期（例如，小于5秒），则立即登出或忽略
      if (expiresInMilliseconds <= 5000) {
        console.warn('Token已过期或即将过期，立即执行登出。');
        this.logoutApp();
        return;
      }

      this.clearLogoutCounter(); // 清除之前的定时器
      this.logoutTimeoutId = setTimeout(() => {
        console.log('Token过期，自动登出。');
        this.logoutApp();
      }, expiresInMilliseconds);

      console.log(`登出计时器已设置，将在 ${expiresInMilliseconds / 1000} 秒后触发。`);

    } catch (error) {
      console.error('解析JWT失败或Token无效:', error);
      this.clearLogoutCounter();
      this.logoutApp(); // 解析失败也强制登出
    }
  }

  /**
   * 清除当前的登出计时器
   */
  public clearLogoutCounter(): void {
    if (this.logoutTimeoutId) {
      clearTimeout(this.logoutTimeoutId);
      this.logoutTimeoutId = null;
      console.log('登出计时器已清除。');
    }
  }

  /**
   * 执行客户端登出操作
   */
  public logoutApp(): void {
    this.clearLogoutCounter(); // 登出时确保清除计时器
    localStorage.removeItem('bearer_token'); // 清除存储的Token
    // 其他登出逻辑，如清除用户数据、重定向到登录页
    this.router.navigate(['/login']);
    console.log('用户已登出。');
  }

  // 其他认证相关方法...
}

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';
import { AuthService } from './auth.service'; // 导入你的认证服务

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 假设你的Token存储在localStorage中
    const token = localStorage.getItem('bearer_token');

    // 在发送请求前，检查Token并添加到请求头
    let authReq = request;
    if (token) {
      authReq = request.clone({
        headers: request.headers.set('Authorization', `Bearer ${token}`)
      });
    }

    return next.handle(authReq).pipe(
      tap((event: HttpEvent<any>) => {
        // 捕获响应，检查是否有新的Token或更新的Token
        if (event instanceof HttpResponse) {
          const newToken = event.headers.get('Authorization')?.replace('Bearer ', '');
          if (newToken) {
            localStorage.setItem('bearer_token', newToken); // 更新本地Token
            this.authService.updateLogoutCounter(newToken); // 更新登出计时器
          } else if (token) {
            // 如果响应中没有新Token，但之前有Token，则继续使用旧Token更新计时器
            // 这对于后端不每次都返回Token，但Token可能在后台被刷新（例如通过cookie或其他机制）的情况很重要
            // 或者只是为了确保每次API调用后都刷新计时器（如果后端没有延长Token有效期，计时器不会改变）
            this.authService.updateLogoutCounter(token);
          }
        }
      }),
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401 || error.status === 403) {
          console.error('API请求失败：认证失败或无权限。');
          this.authService.logoutApp(); // 强制登出
        }
        return throwError(error);
      })
    );
  }
}

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

import { AppComponent } from './app.component';
import { TokenInterceptor } from './token.interceptor'; // 导入你的拦截器

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 确保导入HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }