MSAL2 Angular 无法自动为HTTP请求添加Bearer Token问题求助

1. 修正受保护资源匹配规则 #

MSAL 2.x 拦截器的protectedResourceMap采用前缀匹配规则，只要实际请求路径和配置的端点前缀不完全匹配，就不会自动加Token，可按以下方式调整：

• 如果你业务中使用相对路径发请求（比如this.http.get('/api/user')），需要把相对路径前缀也加入匹配规则：

const protectedResourceMap = new Map([ 
  [protectedResources.MainStreetContact.endpoint, protectedResources.MainStreetContact.scopes],
  ['/api/', protectedResources.MainStreetContact.scopes] // 替换为你实际使用的相对路径前缀
])

• 临时测试可以用通配符匹配所有请求，确认是否是匹配规则导致的问题：

const protectedResourceMap = new Map([ 
  ['*', protectedResources.MainStreetContact.scopes]
])

2. 检查拦截器注册顺序 #

如果你项目中有其他自定义HTTP拦截器，必须保证MsalInterceptor是第一个注册的，避免后续拦截器清除/覆盖自动添加的Authorization头。

3. 确认Scope配置合法 #

你配置的access_as_user scope需要满足以下条件：

• 和Azure AD后台后端应用注册中暴露的scope名称完全一致，区分大小写
• 前端应用注册已经申请了该scope的权限，且管理员已同意授权
• 可手动调用接口测试能否正常获取Token，排除权限问题：

// 登录成功后执行测试代码
this.msalService.acquireTokenSilent({
  scopes: protectedResources.MainStreetContact.scopes
}).subscribe(res => {
  console.log('获取到的Access Token：', res.accessToken)
})

如果拿不到Token，需要先修正Azure AD的权限配置。

4. 排查手动覆盖头逻辑 #

确认业务代码或其他拦截器中没有手动设置Authorization请求头，否则会覆盖MsalInterceptor自动添加的Bearer Token。

5. 升级依赖修复已知Bug #

你当前使用的@azure/msal-angular@2.0.5属于较早的2.x版本，存在已知的拦截器匹配Bug，可先升级到最新的2.x稳定版本复现问题：

npm install @azure/msal-angular@2.x @azure/msal-browser@2.x

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