Angular中监听JWT过期属性的最佳实践（替代$scope.$watch）

嘿，很高兴能帮到你！在Angular（4及以上版本）里，确实有比AngularJS的$scope.$watch更贴合框架理念的方式来监听令牌状态变化，结合JWT验证的场景，我整理了几个最佳实践方案：

1. 用RxJS的BehaviorSubject管理令牌状态（替代$watch的核心方案） #

Angular推崇响应式编程，RxJS的BehaviorSubject是管理可观察状态的绝佳选择——它既能保存当前的令牌值，又能在令牌变更时通知所有订阅者。

实现步骤： #

• 在你的认证服务（比如AuthService）中创建一个BehaviorSubject来存储令牌，同时封装令牌过期检查的逻辑：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 初始化时传入当前存储的令牌（比如从localStorage读取）
  private tokenSubject = new BehaviorSubject<string | null>(localStorage.getItem('jwt_token'));
  public token$: Observable<string | null> = this.tokenSubject.asObservable();

  // 检查令牌是否过期的方法
  isTokenExpired(): boolean {
    const token = this.tokenSubject.value;
    if (!token) return true;
    
    const payload = JSON.parse(atob(token.split('.')[1]));
    const expirationTime = payload.exp * 1000;
    return Date.now() > expirationTime;
  }

  // 更新令牌的方法（登录/刷新时调用）
  updateToken(newToken: string | null): void {
    if (newToken) {
      localStorage.setItem('jwt_token', newToken);
    } else {
      localStorage.removeItem('jwt_token');
    }
    this.tokenSubject.next(newToken);
  }
}

• 在组件中订阅token$来监听令牌变化，同时可以结合过期检查：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AuthService } from './auth.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-protected',
  template: `
    <div *ngIf="!isTokenExpired">已登录</div>
    <div *ngIf="isTokenExpired">请重新登录</div>
  `
})
export class ProtectedComponent implements OnInit, OnDestroy {
  private tokenSubscription!: Subscription;
  isTokenExpired = true;

  constructor(private authService: AuthService) {}

  ngOnInit(): void {
    // 订阅令牌变化，每次变更都检查是否过期
    this.tokenSubscription = this.authService.token$.subscribe(() => {
      this.isTokenExpired = this.authService.isTokenExpired();
      // 这里可以添加令牌过期后的处理逻辑，比如跳转登录页
      if (this.isTokenExpired) {
        // this.router.navigate(['/login']);
      }
    });
  }

  ngOnDestroy(): void {
    // 取消订阅避免内存泄漏
    this.tokenSubscription.unsubscribe();
  }
}

2. 用AsyncPipe简化订阅（更简洁的模板层处理） #

如果只是在模板中根据令牌状态展示内容，可以用Angular的AsyncPipe，它会自动帮你处理订阅和取消订阅，省去手动管理Subscription的麻烦：

// 在AuthService中新增一个返回是否过期的可观察对象
get isTokenExpired$(): Observable<boolean> {
  return this.token$.pipe(map(() => this.isTokenExpired()));
}

然后在模板中直接使用：

<div *ngIf="authService.isTokenExpired$ | async as isExpired">
  <div *ngIf="!isExpired">欢迎回来！</div>
  <div *ngIf="isExpired">会话已过期，请重新登录</div>
</div>

3. 结合HTTP拦截器实现自动令牌刷新与变更检测 #

在JWT验证的场景中，令牌过期前自动刷新是很常见的需求，我们可以通过HTTP拦截器来实现，同时更新BehaviorSubject中的令牌，让所有订阅者自动感知变化：

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

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

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = this.authService.tokenSubject.value;
    
    // 如果令牌存在且未过期，附加到请求头
    if (token && !this.authService.isTokenExpired()) {
      request = request.clone({
        setHeaders: { Authorization: `Bearer ${token}` }
      });
      return next.handle(request);
    }

    // 如果令牌过期，调用刷新接口获取新令牌
    return this.authService.refreshToken().pipe(
      switchMap((newToken) => {
        this.authService.updateToken(newToken);
        // 用新令牌重新发起请求
        const updatedRequest = request.clone({
          setHeaders: { Authorization: `Bearer ${newToken}` }
        });
        return next.handle(updatedRequest);
      }),
      catchError(() => {
        // 刷新失败，清空令牌并跳转登录页
        this.authService.updateToken(null);
        // this.router.navigate(['/login']);
        return next.handle(request);
      })
    );
  }
}

为什么不用$scope.$watch？ #

AngularJS的$scope.$watch是基于脏检查机制的，而Angular（4+）使用的是变更检测树，性能更优。用RxJS的可观察对象来管理状态，不仅更符合Angular的响应式设计思想，还能更好地处理异步场景（比如令牌刷新），同时避免脏检查带来的性能开销。

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