如何在Angular的HttpInterceptor中传递Cognito JWT Token

核心思路 #

放弃依赖localStorage固定键存储/读取Token的方式，直接利用AWS Amplify Auth的内置方法实时获取当前活跃用户的有效会话Token——Amplify会自动处理不同用户的会话隔离、Token刷新等逻辑，完全适配多用户场景。

具体实现方案 #

方案1：直接在拦截器中调用Amplify Auth方法（简洁高效）

修改Token拦截器，通过Amplify的currentSession()方法实时获取当前用户的有效Token，无需手动维护localStorage：

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';
import { switchMap, catchError } from 'rxjs/operators';
import { Auth } from 'aws-amplify';

@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {

  constructor() { }
  
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 将Promise转换为Observable，适配Angular响应式流
    return from(Auth.currentSession()).pipe(
      switchMap(session => {
        const token = session.getAccessToken().getJwtToken();
        // 克隆请求并添加Authorization头
        const authReq = req.clone({
          setHeaders: {
            Authorization: `Bearer ${token}`
          }
        });
        return next.handle(authReq);
      }),
      // 未登录/会话失效时，直接传递原始请求
      catchError(() => next.handle(req))
    );
  }
}

方案2：通过CognitoService封装Token获取逻辑（代码解耦）

如果希望Token获取逻辑集中在认证服务中，可以给CognitoService新增Token获取方法：

// 修改CognitoService，添加获取当前Token的方法
@Injectable({
  providedIn: 'root',
})
export class CognitoService {
  // ... 原有代码保持不变 ...

  public getCurrentToken(): Promise<string> {
    return Auth.currentSession()
      .then(session => session.getAccessToken().getJwtToken())
      .catch(() => Promise.resolve(''));
  }
}

然后在拦截器中注入CognitoService并调用该方法：

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { CognitoService } from '../cognito.service';

@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {

  constructor(private cognitoService: CognitoService) { }
  
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return from(this.cognitoService.getCurrentToken()).pipe(
      switchMap(token => {
        if (!token) {
          return next.handle(req);
        }
        const authReq = req.clone({
          setHeaders: {
            Authorization: `Bearer ${token}`
          }
        });
        return next.handle(authReq);
      })
    );
  }
}

关键说明 #

• Amplify Auth的currentSession()方法会自动处理：
  • 当前登录用户的会话有效性校验
  • 过期Token的自动刷新（需在Cognito用户池配置刷新Token策略）
  • 多用户切换后的会话隔离，始终返回当前活跃用户的Token
• 无需手动管理localStorage，彻底避免多用户场景下的键冲突问题
• 拦截器中通过from()将Promise转换为Observable，符合Angular HTTP拦截器的响应式编程规范

内容的提问来源于stack exchange，提问作者noob-on-rails