Angular中Bearer Token异步获取后无法正确设置请求头问题

我明白你现在卡在哪了——异步获取token的时候，不管用Promise还是直接subscribe，都没法把正确的token塞进请求头里，要么出现[Object Promise]，要么拿不到值。这其实都是因为Angular的HTTP拦截器是基于Observable的，得用RxJS的异步操作符来处理这个异步流才行。

先给你拆解下之前的问题根源：

• 第一个方法里，你直接把callToken()返回的Promise放到请求头里，这时候Promise还没完成resolve，请求头里存的是Promise对象本身，转成字符串自然就是[Object Promise]；
• 第二个方法用subscribe，但是subscribe是异步执行的，你return token的时候，subscribe里的赋值逻辑还没跑完，所以返回的是undefined，根本拿不到正确的token。

下面给你一套完整的解决方案：

步骤1：把token获取逻辑改成Observable（推荐用Angular的HttpClient） #

尽量别在Angular里混用fetch，用HttpClient更贴合框架生态，而且它本身返回的就是Observable，处理异步流更顺手。先改造你的token获取方法：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 定义Token结构的接口
interface TokenResponse {
  access_token: string;
  expires_in?: number; // 可选，根据你的token返回结构调整
}

// 在你的Auth服务中注入HttpClient
constructor(private http: HttpClient) {}

getToken(): Observable<string> {
  const tokenUrl = '你的token端点URL';
  const requestBody = 'client_id=xxx&grant_type=client_credentials'; // 替换成你的实际请求体
  const headers = new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded'
  });

  return this.http.post<TokenResponse>(tokenUrl, requestBody, { headers })
    .pipe(
      map(resp => resp.access_token)
    );
}

步骤2：修改拦截器，用RxJS操作符处理异步token #

拦截器需要返回Observable<HttpEvent<any>>，所以我们要用switchMap来等待token Observable完成，再克隆请求并添加Authorization头：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable, switchMap, catchError, throwError } from 'rxjs';
import { AuthService } from '../services/auth.service'; // 引入你的Auth服务

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 跳过获取token的请求本身（避免循环调用）
    if (request.headers.get('Content-Type') === 'application/x-www-form-urlencoded') {
      return next.handle(request);
    }

    // 用switchMap等待token获取完成，再处理请求
    return this.authService.getToken().pipe(
      switchMap(token => {
        const authRequest = request.clone({
          setHeaders: {
            Authorization: `Bearer ${token}`
          }
        });
        return next.handle(authRequest);
      }),
      // 处理token获取失败的情况
      catchError(error => {
        console.error('获取授权Token失败:', error);
        return throwError(() => new Error('授权失败，请检查配置'));
      })
    );
  }
}

额外优化：缓存token，避免重复请求 #

每次请求都去调用token接口太浪费资源，你可以在Auth服务里加个缓存逻辑，检查token是否过期，没过期就直接返回缓存值：

import { of } from 'rxjs';

private cachedToken: string | null = null;
private tokenExpiryTime: number | null = null;

getToken(): Observable<string> {
  // 检查token是否存在且未过期
  if (this.cachedToken && this.tokenExpiryTime && Date.now() < this.tokenExpiryTime) {
    return of(this.cachedToken); // of操作符返回一个同步的Observable
  }

  // 重新获取token并缓存
  const tokenUrl = '你的token端点URL';
  const requestBody = 'client_id=xxx&grant_type=client_credentials';
  const headers = new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded'
  });

  return this.http.post<TokenResponse>(tokenUrl, requestBody, { headers })
    .pipe(
      map(resp => {
        this.cachedToken = resp.access_token;
        // 假设token有效期是3600秒，根据实际返回的expires_in调整
        this.tokenExpiryTime = Date.now() + (resp.expires_in || 3600) * 1000;
        return resp.access_token;
      })
    );
}

这样改造后，拦截器会等待token异步获取完成，再把正确的token值放到请求头里，不会再出现[Object Promise]或者undefined的问题了。

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