如何在Angular中通过AWS Amplify获取编码格式的JWT？

安全阿岳

2026-6-19

解决Angular拦截器中获取AWS Amplify原始JWT的问题

在AWS Amplify v6中，fetchAuthSession()返回的accessToken并不是原始的JWT字符串，而是一个**CognitoAccessToken实例对象**，这个对象包含了解码后的token声明（Claims）以及原始的JWT字符串属性。你需要直接访问该对象的token属性来获取编码格式的JWT。

修改后的拦截器代码

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<any>> {
    return from(fetchAuthSession()).pipe(
      switchMap(res => {
        // 从CognitoAccessToken实例中获取原始JWT字符串
        const accessToken = res.tokens?.accessToken?.token || '';
        let clonedReq = req;
        
        // 仅在token存在时添加Authorization头
        if (accessToken) {
          clonedReq = req.clone({
            setHeaders: {
              Authorization: `Bearer ${accessToken}`
            }
          });
        }
        
        return next.handle(clonedReq);
      })
    );
  }
}

关键说明

res.tokens?.accessToken是CognitoAccessToken类型的对象，它的token属性存储了原始的编码格式JWT。
添加了空值判断：如果用户未登录或token不存在，不会修改请求头，避免发送无效的Bearer 空值头。
你也可以调用accessToken.toString()方法来获取原始JWT，因为CognitoAccessToken类的toString()方法内部会返回token属性的值，效果和直接访问token一致。