Angular集成auth0时AuthHttpInterceptor未为请求附加token问题

问题排查与解决方案 #

1. 修正拦截器路径匹配规则

Auth0的AuthHttpInterceptor对allowedList中的uri默认做严格匹配，若配置中携带查询参数，仅当实际请求的查询参数与配置完全一致时才会触发拦截，你的分页参数pn是动态值，所以写死?pn=1会导致大部分请求匹配失败。
修改allowedList配置如下：

httpInterceptor: {
  allowedList: [
    {
      uri: 'http://localhost:5000/api/v1/members',
      httpMethod: HttpMethod.Get
    }
    // 若需要匹配该路径下所有子路径/任意查询参数，可使用通配符写法
    // 'http://localhost:5000/api/v1/members*'
  ]
}

2. 补充Audience配置

调用后端API时必须在AuthModule.forRoot中配置audience参数，该值对应你在Auth0后台创建API时设置的唯一标识符，未配置该参数时SDK不会生成适配后端API的JWT令牌，拦截器也不会附加授权头。
修改AuthModule配置：

AuthModule.forRoot({
  domain: '<my app domain>',
  clientId: '<my client id>',
  // 替换为你自己的API Audience值
  audience: '<your-api-audience>',
  httpInterceptor: {
    // 原有配置不变
  }
})

3. 确认请求发送方式

Angular的HTTP拦截器仅能拦截@angular/common/http中HttpClient发起的请求，检查你的WebService中getMembers方法是否使用HttpClient发送请求，示例正确写法：

@Injectable()
export class WebService {
  constructor(private http: HttpClient) {}

  getMembers(page: number) {
    return this.http.get('http://localhost:5000/api/v1/members', {
      params: { pn: page.toString() }
    })
  }
}

4. 验证登录状态与令牌获取

若用户未处于登录状态，或令牌获取失败，拦截器也不会附加授权头，可添加临时日志排查：

// 在MembersComponent中注入AuthService
constructor(private webService: WebService, private auth: AuthService) { }

ngOnInit() {
  // 验证登录状态与令牌可用性
  this.auth.isAuthenticated$.subscribe(isAuth => {
    console.log('登录状态：', isAuth);
    if (isAuth) {
      this.auth.getAccessTokenSilently().subscribe(
        token => console.log('令牌获取成功：', token),
        err => console.error('令牌获取失败：', err)
      )
    }
  })

  // 原有业务逻辑不变
  if (sessionStorage['page']) {
    this.page = Number(sessionStorage['page']);
  }
  this.members_list = this.webService.getMembers(this.page);
  this.num_pages = 90 / 10;
}

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