微软身份验证库(MSAL)中自定义令牌过期重定向的实现

在基于微软身份验证库(MSAL)开发的应用中，处理访问令牌过期是一个常见需求。本文将深入探讨如何在使用MSAL Angular时实现自定义的令牌过期重定向逻辑。

问题背景

当使用Azure B2C进行身份验证时，开发者经常需要处理访问令牌过期的情况。默认情况下，MSAL会在令牌过期时自动重定向用户到微软托管的登录页面。但在某些业务场景下，开发者可能希望将用户重定向到应用内部的特定页面，而不是直接跳转到微软登录页。

核心问题分析

在MSAL Angular应用中，当访问令牌过期时，系统会触发msal:acquireTokenFailure事件。开发者通常会尝试通过监听这个事件来实现自定义重定向逻辑：

this.msalBroadcastService.msalSubject$.subscribe((msalSubject) => {
  if (msalSubject.eventType === 'msal:acquireTokenFailure') {
    this.router.navigate(['/', AppRoutes.LOGIN]);
  }
});

然而，这种简单的重定向尝试往往不会生效，用户仍然会被重定向到微软登录页面。这是因为MSAL Angular默认配置了拦截器和路由守卫，这些机制会在令牌失效时优先执行标准的重定向流程。

解决方案

要实现完全自定义的重定向行为，开发者需要采取以下步骤：

1. 自定义HTTP拦截器：覆盖MSAL提供的默认拦截器，实现自己的令牌获取和错误处理逻辑。

2. 自定义路由守卫：创建应用特定的路由守卫，替代MSAL的默认守卫。

3. 正确处理令牌刷新：在拦截器中实现令牌自动刷新逻辑，避免不必要的重定向。

实现细节

自定义拦截器实现

@Injectable()
export class CustomAuthInterceptor implements HttpInterceptor {
  constructor(
    private authService: MsalService,
    private router: Router
  ) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // 尝试静默刷新令牌
          return this.authService.acquireTokenSilent({
            scopes: ['your_api_scope']
          }).pipe(
            switchMap((response: AuthenticationResult) => {
              // 令牌刷新成功，重试原始请求
              const newReq = req.clone({
                setHeaders: {
                  Authorization: `Bearer ${response.accessToken}`
                }
              });
              return next.handle(newReq);
            }),
            catchError((silentError) => {
              // 静默刷新失败，执行自定义重定向
              this.router.navigate(['/custom-login']);
              return throwError(() => silentError);
            })
          );
        }
        return throwError(() => error);
      })
    );
  }
}

自定义路由守卫实现

@Injectable()
export class CustomAuthGuard implements CanActivate {
  constructor(
    private authService: MsalService,
    private router: Router
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.authService.handleRedirectObservable().pipe(
      switchMap(() => {
        return this.authService.instance.getAllAccounts().length > 0
          ? of(true)
          : this.handleUnauthenticated(state);
      })
    );
  }

  private handleUnauthenticated(state: RouterStateSnapshot): Observable<boolean> {
    // 自定义未认证处理逻辑
    this.router.navigate(['/custom-login'], {
      queryParams: { returnUrl: state.url }
    });
    return of(false);
  }
}

最佳实践

1. 用户体验考虑：在重定向前，可以考虑显示一个友好的提示信息，告知用户会话已过期。

2. 状态保持：重定向时保存当前页面URL，以便登录后能返回原页面。

3. 错误处理：为不同的错误类型(如网络错误、服务器错误等)设计不同的处理策略。

4. 性能优化：实现令牌预刷新机制，在令牌即将过期前自动刷新，减少用户感知的中断。

总结

通过自定义拦截器和路由守卫，开发者可以完全控制MSAL应用中的令牌过期处理流程。这种方案不仅解决了默认重定向行为的问题，还提供了更大的灵活性来满足各种业务场景需求。实现时需要注意正确处理各种边界情况，并考虑用户体验的优化。