在Angular应用中实现Bearer Token过期自动登出机制

// src/app/services/token-utils.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TokenUtilsService {

  constructor() { }

  /**
   * 从JWT中提取过期时间（exp claim）。
   * @param token Bearer Token字符串
   * @returns 剩余过期时间（毫秒），如果无法解析或已过期则返回null
   */
  public getExpirationTimeFromToken(token: string): number | null {
    try {
      const payloadBase64 = token.split('.')[1];
      const decodedPayload = JSON.parse(atob(payloadBase64));

      if (decodedPayload && decodedPayload.exp) {
        const expirationTimeSeconds = decodedPayload.exp; // exp是Unix时间戳，秒
        const currentTimeSeconds = Math.floor(Date.now() / 1000); // 当前时间，秒

        // 计算剩余时间（毫秒）
        const remainingTimeMs = (expirationTimeSeconds - currentTimeSeconds) * 1000;
        return remainingTimeMs > 0 ? remainingTimeMs : null; // 如果已过期或无效，返回null
      }
    } catch (e) {
      console.error('Failed to decode token or get expiration:', e);
    }
    return null;
  }
}

// src/app/services/auth.service.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { TokenUtilsService } from './token-utils.service';

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

  constructor(
    private router: Router,
    private tokenUtilsService: TokenUtilsService
  ) { }

  /**
   * 安排一个定时器，在Token过期前触发登出。
   * @param token 当前的Bearer Token
   */
  public scheduleProactiveLogout(token: string): void {
    this.cancelScheduledLogout(); // 先取消任何已存在的定时器

    const remainingTimeMs = this.tokenUtilsService.getExpirationTimeFromToken(token);

    if (remainingTimeMs !== null && remainingTimeMs > 0) {
      // 留出一些缓冲时间，确保在真正过期前登出
      const bufferMs = 5000; // 5秒缓冲
      const effectiveTimeout = Math.max(0, remainingTimeMs - bufferMs);

      this.logoutTimeoutId = setTimeout(() => {
        console.log('Token即将过期，执行自动登出...');
        this.logoutUser();
      }, effectiveTimeout);
      console.log(`已安排在 ${effectiveTimeout / 1000} 秒后自动登出。`);
    } else if (remainingTimeMs === null) {
      // Token无效或已过期，立即登出
      console.log('Token无效或已过期，立即执行登出...');
      this.logoutUser();
    }
  }

  /**
   * 取消当前已安排的登出定时器。
   */
  public cancelScheduledLogout(): void {
    if (this.logoutTimeoutId) {
      clearTimeout(this.logoutTimeoutId);
      this.logoutTimeoutId = null;
      console.log('已取消自动登出定时器。');
    }
  }

  /**
   * 执行用户登出操作。
   */
  public logoutUser(): void {
    // 清除本地存储中的Token
    localStorage.removeItem('bearer_token');
    // 清除其他与用户会话相关的数据
    // ...
    // 取消任何未完成的登出定时器
    this.cancelScheduledLogout();
    // 导航到登录页面
    this.router.navigate(['/login']);
    console.log('用户已登出。');
  }

  /**
   * 在用户登录成功或Token被刷新后调用此方法。
   * @param token 新的Bearer Token
   */
  public handleLoginSuccess(token: string): void {
    localStorage.setItem('bearer_token', token);
    this.scheduleProactiveLogout(token);
  }

  /**
   * 获取当前存储的Token
   */
  public getCurrentToken(): string | null {
    return localStorage.getItem('bearer_token');
  }
}

// src/app/interceptors/token.interceptor.ts
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 '../services/auth.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = this.authService.getCurrentToken();
    let authReq = request;

    // 如果有Token，添加到请求头
    if (token) {
      authReq = request.clone({
        headers: request.headers.set('Authorization', `Bearer ${token}`)
      });
    }

    return next.handle(authReq).pipe(
      tap((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          // 假设后端在某些响应中（例如登录或Token刷新）返回新的Token
          // 这里可以检查响应头或响应体中的新Token
          // 简单起见，我们假设只要有成功的响应，就重新评估当前存储的Token
          const currentToken = this.authService.getCurrentToken();
          if (currentToken) {
            this.authService.scheduleProactiveLogout(currentToken);
          }
        }
      }),
      catchError((error: HttpErrorResponse) => {
        // 如果后端仍然返回401/403，说明客户端的预测性登出可能未能及时触发
        // 或者Token在服务器端被立即失效。此时仍需强制登出。
        if (error.status === 401 || error.status === 403) {
          console.error('API请求因认证失败或无权限被拒绝，服务器端验证到Token无效。');
          this.authService.logoutUser(); // 强制登出
        }
        return throwError(() => error);
      })
    );
  }
}

// src/app/app.module.ts
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 './interceptors/token.interceptor'; // 导入拦截器

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 引入HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true // 允许多个拦截器
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }