Angular 5集成adal.js：自动令牌刷新失败及应用重复加载问题

我之前在Angular 5项目里用adal.js处理令牌自动刷新时也踩过几乎一模一样的坑，结合你的配置细节，咱们一步步排查和解决：

ADAL的自动刷新功能严重依赖正确的缓存配置，你的AuthService初始化时必须包含这几个参数：

• cacheLocation: 'localStorage'：这是重中之重！sessionStorage在页面刷新或标签页关闭后会丢失，而自动刷新需要从持久化缓存里读取刷新令牌，用localStorage才能保证刷新逻辑正常触发
• redirectUri和postLogoutRedirectUri必须和你Azure AD应用注册里配置的回调地址完全一致，包括协议（http/https）和域名

举个正确的初始化示例：

import * as adal from 'adal-angular';

export class AuthService {
  private authContext: adal.AuthenticationContext;

  constructor() {
    const adalConfig: adal.Config = {
      clientId: '你的Azure AD客户端ID',
      tenant: '你的租户ID/域名',
      cacheLocation: 'localStorage', // 自动刷新的核心依赖
      redirectUri: `${window.location.origin}/auth-callback`,
      postLogoutRedirectUri: window.location.origin
    };
    this.authContext = new adal.AuthenticationContext(adalConfig);
  }
}

ADAL.js本身会在令牌过期前15分钟自动触发刷新，但前提是你每次发起API请求时，都通过ADAL的官方方法获取令牌，而不是自己缓存第一次拿到的令牌。

在Angular 5里，最好用HttpInterceptor统一处理令牌注入，示例代码如下：

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

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

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 每次请求都调用getCachedToken，ADAL内部会自动检查令牌有效期，过期则刷新
    const validToken = this.authService.authContext.getCachedToken(
      this.authService.authContext.config.clientId
    );

    if (validToken) {
      const authRequest = req.clone({
        setHeaders: {
          Authorization: `Bearer ${validToken}`
        }
      });
      return next.handle(authRequest);
    }
    return next.handle(req);
  }
}

千万不要直接从localStorage里读取adal.idtoken或adal.access.token，因为ADAL的刷新逻辑只有在调用官方方法时才会触发。

因为你是向跨域URL发起API请求，还要检查两个关键点：

• 在Azure AD应用注册的API权限里，确保已经添加了目标API的权限，并且授予了管理员同意
• 后端API的CORS配置必须允许你的应用域名访问，并且允许携带Authorization请求头（很多后端默认会拦截带自定义头的跨域请求）

确认你在.angular-cli.json的scripts数组里只引入了adal.js，不要同时引入adal-angular.js，否则会导致ADAL内部逻辑冲突：

"scripts": [
  "../node_modules/adal-angular/lib/adal.js"
]

如果还是没解决，可以开启ADAL的详细日志，看看刷新过程中有没有报错：

// 在AuthService的构造函数里添加日志配置
this.authContext.logger.level = adal.Logging.Verbose;
this.authContext.logger.log = (msg: string) => {
  console.log('[ADAL Debug]', msg);
};

查看控制台日志里有没有Refresh token is expired、Failed to acquire token silently这类错误信息，这些会帮你快速定位问题根源。

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