Angular版MSAL访问令牌过期时如何自动重定向用户至登录页

关于令牌过期即时触发事件的说明 #

适配Angular 13的MSAL v2版本本身没有内置「访问令牌自然过期瞬间主动推送事件」的能力，这和它的懒刷新设计一致——默认仅在令牌被实际使用（拦截器发起受保护API请求、手动调用令牌获取方法）时才会校验过期状态、触发刷新逻辑，这也是你之前订阅msalBroadcastService.msalSubject$没有在过期时间点收到事件的根本原因。

如果要实现无需用户交互、过期即跳转登录页的逻辑，不需要等MSAL原生推送过期事件，通过过期时间预判+主动校验的方式即可实现：

• 每次成功获取令牌时，缓存令牌对应的expiresOn过期时间戳
• 基于过期时间设置RxJS定时任务，在过期前30-60秒主动调用acquireTokenSilent尝试静默刷新
• 若静默刷新返回需要交互的错误，直接触发登出重定向，不需要等待用户发起操作

对应RxJS 7兼容的实现代码参考：

// app.component.ts 核心逻辑
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionRequiredAuthError } from '@azure/msal-browser';
import { filter, takeUntil, timer, switchMap, catchError, of } from 'rxjs';

// 监听令牌获取成功事件，同步最新过期时间
this.msalBroadcastService.msalSubject$
  .pipe(
    filter((msg: EventMessage) => msg.eventType === EventType.ACQUIRE_TOKEN_SUCCESS),
    takeUntil(this.destroy$)
  )
  .subscribe((result: EventMessage) => {
    const expireTime = (result.payload as any).expiresOn.getTime();
    localStorage.setItem('msal_token_expire', String(expireTime));
    this.setupTokenCheckTask(expireTime);
  });

setupTokenCheckTask(expireTimestamp: number) {
  // 提前30秒触发校验，避开临界时间差问题
  const delay = Math.max(0, expireTimestamp - Date.now() - 30 * 1000);
  timer(delay)
    .pipe(
      switchMap(() => this.msalService.instance.acquireTokenSilent({
        account: this.msalService.instance.getActiveAccount(),
        scopes: [] // 替换为应用实际使用的权限范围数组
      })),
      catchError((err) => {
        // 静默刷新无法完成，直接重定向到登录页
        if (err instanceof InteractionRequiredAuthError) {
          this.msalService.instance.logoutRedirect();
        }
        return of(null);
      }),
      takeUntil(this.destroy$)
    )
    .subscribe();
}

令牌获取失败的默认逻辑与事件挂钩 #

默认处理规则 #

• 若令牌获取由MsalInterceptor拦截HTTP请求自动触发：遇到需要用户交互的错误（如刷新令牌过期、会话失效、触发条件访问策略）时，会自动按配置发起redirect或popup形式的登录交互；遇到网络错误、权限不足等非交互类错误时，会直接将错误抛给原HTTP请求的调用方，不做额外处理
• 若令牌获取由业务代码手动调用acquireTokenSilent/acquireTokenPopup/acquireTokenRedirect触发：MSAL不做任何默认兜底处理，错误直接抛给调用逻辑

失败事件挂钩方式 #

MSAL原生支持监听所有令牌获取失败事件，你之前没有收到事件是因为没有过滤对应的事件类型，正确的订阅写法如下，拦截器触发和手动调用触发的失败都会进入这个订阅：

this.msalBroadcastService.msalSubject$
  .pipe(
    filter((msg: EventMessage) => msg.eventType === EventType.ACQUIRE_TOKEN_FAILURE),
    takeUntil(this.destroy$)
  )
  .subscribe((result: EventMessage) => {
    // 自定义失败处理逻辑：错误日志上报、特定错误码触发重定向等
    const errorCode = result.error?.errorCode;
    if (['invalid_grant', 'interaction_required', 'login_required'].includes(errorCode)) {
      this.msalService.instance.logoutRedirect();
    }
  });

本地测试模拟方法 #

你之前无法复现对应场景是因为模拟方式不对，两个核心场景的模拟方法：

• 模拟令牌过期：获取有效令牌后，手动修改浏览器存储中MSAL缓存的令牌条目，将expiresOn字段改为早于当前时间的时间戳，或直接调用this.msalService.instance.clearCache()清空本地令牌缓存，再调用acquireTokenSilent即可复现过期场景
• 模拟令牌获取失败：在MsalInterceptor的保护资源配置中，给对应API配置一个当前应用无权限的无效scope，发起对应HTTP请求时就会触发令牌获取失败；也可以在调用acquireTokenSilent时断开网络，直接触发失败事件

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