如何解决MSAL拦截器无法为Apollo GraphQL请求添加认证头的问题？

问题概述 #

• 应用登录、登出流程正常，但执行GraphQL查询时返回500错误，请求头中未携带认证Token
• 调试确认MSAL拦截器配置工厂函数从未被调用

核心问题定位 #

1. 未将MsalInterceptor注册到Angular的HTTP拦截器链中，导致拦截器根本不会被触发
2. Apollo Client的请求链路独立于Angular HTTP拦截器，默认不会自动使用MSAL的Token逻辑

分步修复方案 #

1. 注册MsalInterceptor到HTTP拦截器链 #

在AppModule的providers数组中添加拦截器配置，将MsalInterceptor加入Angular的HTTP拦截器队列：

providers: [
    // ... 其他已存在的provider配置
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    MsalService,
    MsalBroadcastService,
    MsalGuard,
    // ... 其他provider配置
]

2. 调整Apollo Client的Token获取逻辑 #

Apollo Client不依赖Angular HTTP拦截器，需直接从MSAL服务获取Token，替换原有的localStorage读取逻辑：

export function ApolloFactory(httpLink: HttpLink, msalService: MsalService) {
    const auth = setContext(async (operation, context) => {
        const account = msalService.instance.getActiveAccount();
        if (!account) {
            return {};
        }

        // 静默获取对应权限的Access Token
        const tokenResponse = await msalService.instance.acquireTokenSilent({
            account: account,
            scopes: ["api://adtakr/Application.Run"]
        });

        return {
            headers: {
                Authorization: `Bearer ${tokenResponse.accessToken}`
            }
        };
    });

    const link = ApolloLink.from([auth, httpLink.create({ uri: graphURI })]);
    return {
        cache: new InMemoryCache({ addTypename: false }),
        link: link
    };
}

同时更新APOLLO_OPTIONS的依赖，注入MsalService：

{
    provide: APOLLO_OPTIONS,
    useFactory: ApolloFactory,
    deps: [HttpLink, MsalService],
},

3. 验证protectedResourceMap配置准确性 #

确保host() + graphURI生成的地址与实际GraphQL请求的地址完全匹配（包含协议、域名、端口、路径），可添加日志确认：

console.log('Protected resource target:', host() + graphURI);

额外检查项 #

• 确认msalConfig中的clientId、API权限配置与Azure AD后台注册信息一致
• 检查是否有其他HTTP拦截器影响执行顺序，确保MsalInterceptor优先级合理

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