Angular 4中JWT解码Payload求助：如何获取指定格式内容

嘿，我来帮你搞定Angular 4里JWT Payload格式不符的问题！

你现在的核心困扰是：后端返回的JWT解码后Payload和你想要的结构不一样——你期望拿到包含sub（指定字符串值）、name、admin这些自定义字段的Payload，但当前返回的是nbf、jti这类默认字段，且sub值也不对。下面分步骤帮你解决：

一、最根本的解决：调整后端JWT签发配置 #

JWT的Payload内容完全由签发Token的后端服务决定，所以第一步要确认后端的配置：

• 联系后端开发同学，让他们在生成JWT时，把你需要的name、admin字段加入Payload，同时将sub字段的值设置为你期望的"1234567890"（而非当前的数字1）。
• 提醒后端确保iat（签发时间）和exp（过期时间）这两个标准字段正常生成，这两个字段是JWT的默认必填项（部分库会自动生成）。

二、Angular 4中正确解码JWT的姿势 #

假设后端已经调整好了Payload，你可以用angular-jwt库来轻松解码Token，步骤如下：

1. 安装依赖库 #

在项目根目录执行：

npm install @auth0/angular-jwt --save

2. 在AppModule中配置JWT模块 #

打开app.module.ts，添加以下配置：

import { JwtModule } from '@auth0/angular-jwt';

// 定义获取Token的方法，一般存在localStorage里
export function tokenGetter() {
  return localStorage.getItem('access_token');
}

@NgModule({
  imports: [
    // 其他模块...
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        allowedDomains: ['你的后端API域名'] // 比如 'api.example.com'
      }
    })
  ]
})
export class AppModule {}

3. 在登录服务中解码Token #

修改你的Signin方法，拿到Token后解码并验证Payload：

import { JwtHelperService } from '@auth0/angular-jwt';
import { HttpClient } from '@angular/common/http';
import { Observable, of, tap, map, catchError } from 'rxjs';

// 注入HttpClient和JwtHelperService
constructor(private http: HttpClient, private jwtHelper: JwtHelperService) {}

Signin(email: string, password:string , type:string): Observable<boolean> {
  return this.http.post<any>('你的登录接口地址', {email, password, type})
    .pipe(
      tap(response => {
        const token = response.access_token;
        localStorage.setItem('access_token', token);
        // 解码Payload
        const decodedPayload = this.jwtHelper.decodeToken(token);
        console.log('解码后的目标Payload:', decodedPayload);
        // 这里就能拿到你想要的sub、name、admin、iat、exp字段了
      }),
      map(() => true),
      catchError(error => {
        console.error('登录失败:', error);
        return of(false);
      })
    );
}

三、临时方案：前端手动映射字段（不推荐） #

如果后端暂时无法调整Payload，你可以在前端手动把现有字段转换成你需要的格式，比如：

// 假设这是当前解码后的Payload
const currentPayload = { exp: 1523045040, nbf: 1523041440, jti:"V5YPH8VBeQlQnF2e", sub:1 };

// 转换成你期望的格式
const desiredPayload = {
  sub: currentPayload.sub.toString(), // 把数字sub转成字符串（如果需要固定值，这里可以硬编码，但不推荐）
  name: 'John Doe', // 如果后端没返回，可能需要从其他接口获取用户信息
  admin: true, // 根据业务逻辑设置，比如从用户角色判断
  iat: currentPayload.iat || Math.floor(Date.now() / 1000),
  exp: currentPayload.exp
};

不过这个方案只是权宜之计，长期来看还是要让后端按照业务需求生成正确的Payload结构哦。

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