Angular 17函数式Http拦截器中如何使用异步获取Token

我有一个用于为所有请求添加访问令牌的拦截器，唯一的问题是获取该访问令牌只能通过一个返回Promise的异步函数：async getToken(): Promise<string> {。我必须使用这个函数获取令牌，没有其他办法。尝试将authInterceptor函数设为异步但无效。请问如何在如下的函数式拦截器中实现该功能？

import { Inject, inject } from '@angular/core';
import { AuthService } from './auth.service';
import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = Inject(AuthService)
  const authToken = await authService.getToken(); // how to do this?? 
  console.log(authToken);

  // Clone the request and add the authorization header
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer ${authToken}`
    }
  });

  // Pass the cloned request with the updated header to the next handler
  return next(authReq);
};

解决方案 #

Angular的HttpInterceptorFn要求返回Observable<HttpEvent<any>>，无法直接使用async/await（异步函数返回Promise，不符合拦截器的返回类型要求）。可以借助RxJS的操作符将Promise转换为Observable，再串联请求处理逻辑。

修改后的拦截器代码如下：

import { inject } from '@angular/core';
import { AuthService } from './auth.service';
import { HttpInterceptorFn } from '@angular/common/http';
import { from, switchMap } from 'rxjs';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthService);

  // 将Promise转为Observable，等待令牌获取完成后再处理请求
  return from(authService.getToken()).pipe(
    switchMap((authToken) => {
      // 克隆请求并添加Authorization头
      const authReq = req.clone({
        setHeaders: {
          Authorization: `Bearer ${authToken}`
        }
      });
      return next(authReq);
    })
  );
};

关键说明 #

• from(authService.getToken())：把异步获取Token的Promise转换为RxJS Observable，适配拦截器的数据流要求。
• switchMap操作符：等待Token获取完成后，再执行请求克隆与转发逻辑，确保请求发送时已拿到有效令牌。
• 修正注入方式：函数式拦截器中需使用小写的inject()方法，而非大写的Inject装饰器（后者用于构造函数注入场景）。

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