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

// 假设你已经安装了 'jwt-decode' 库
import jwt_decode from 'jwt-decode';

interface DecodedToken {
  exp: number; // Expiration time as Unix timestamp (seconds)
  // ... other claims
}

function getExpirationTime(token: string): number | null {
  try {
    const decoded: DecodedToken = jwt_decode(token);
    return decoded.exp;
  } catch (error) {
    console.error('Error decoding token:', error);
    return null;
  }
}

// auth.interceptor.ts
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { AuthService } from './auth.service'; // 假设你有一个AuthService来处理登出和token存储

@Injectable()
export class TokenExpirationInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      tap((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          // 检查响应头或响应体中是否有新的Bearer Token
          // 示例：从响应头中获取Authorization，或者从登录/刷新token的响应体中获取
          const newToken = event.headers.get('Authorization')?.split('Bearer ')[1] || event.body?.token;

          if (newToken) {
            this.authService.updateLogoutCounter(newToken);
          }
        }
      })
    );
  }
}

// auth.service.ts
import { Injectable, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import jwt_decode from 'jwt-decode';

interface DecodedToken {
  exp: number; // Expiration time as Unix timestamp (seconds)
}

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

  constructor(private router: Router, private ngZone: NgZone) {}

  /**
   * 解析JWT并获取过期时间（Unix时间戳，秒）
   */
  private getExpirationTime(token: string): number | null {
    try {
      const decoded: DecodedToken = jwt_decode(token);
      return decoded.exp;
    } catch (error) {
      console.error('Error decoding token:', error);
      return null;
    }
  }

  /**
   * 根据token的过期时间设置客户端登出定时器
   * @param token 当前的Bearer Token
   */
  updateLogoutCounter(token: string): void {
    const exp = this.getExpirationTime(token);
    if (!exp) {
      return;
    }

    // 清除任何之前设置的登出定时器
    if (this.logoutTimeoutId) {
      clearTimeout(this.logoutTimeoutId);
    }

    // 计算从现在到token过期还剩多少毫秒
    // exp是秒，Date.now()是毫秒
    const expiresInMs = (exp * 1000) - Date.now();

    // 确保定时器在Angular Zone外部运行，避免不必要的变更检测
    this.ngZone.runOutsideAngular(() => {
      this.logoutTimeoutId = setTimeout(() => {
        // 在Angular Zone内部执行登出操作，因为这会涉及到UI更新和路由导航
        this.ngZone.run(() => {
          this.logoutApp();
        });
      }, expiresInMs);
    });

    console.log(`Logout scheduled in ${expiresInMs / 1000} seconds.`);
  }

  /**
   * 执行客户端登出操作
   */
  logoutApp(): void {
    console.log('Token expired, logging out...');
    // 清除本地存储的token
    localStorage.removeItem('bearer_token');
    // 导航到登录页面
    this.router.navigate(['/login']);
    // 清除定时器，以防万一
    if (this.logoutTimeoutId) {
      clearTimeout(this.logoutTimeoutId);
      this.logoutTimeoutId = null;
    }
  }

  // 假设你还有一个方法来获取当前的token
  getCurrentToken(): string | null {
    return localStorage.getItem('bearer_token');
  }

  // 在应用初始化时，如果已有token，也需要设置定时器
  // 例如，在AppComponent的ngOnInit或某个初始化服务中调用
  initializeTokenExpirationCheck(): void {
    const token = this.getCurrentToken();
    if (token) {
      this.updateLogoutCounter(token);
    }
  }
}

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

import { AppComponent } from './app.component';
import { TokenExpirationInterceptor } from './token-expiration.interceptor';
// ... 其他导入

@NgModule({
  declarations: [
    AppComponent,
    // ...
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    // ...
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenExpirationInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }