如何在Angular2客户端解析C# .NET生成的JWT令牌？

后端生成的JWT说明 #

你的.NET后端通过JwtSecurityTokenHandler生成的JWT包含以下核心信息：

• 携带NameIdentifier类型的Claim，值为用户ID
• 过期时间为生成后15分钟
• 使用HmacSha256算法和ASCII编码的密钥签名

后端生成代码：

private string generateJwtToken(Account account)
{
    var tokenHandler = new JwtSecurityTokenHandler();
    var key = Encoding.ASCII.GetBytes(_appSettings.Secret);
    var tokenDescriptor = new SecurityTokenDescriptor
    {
        Subject = new ClaimsIdentity(new[] { new Claim(ClaimTypes.NameIdentifier, account.Id.ToString()) }),
        Expires = DateTime.UtcNow.AddMinutes(15),
        SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature)
    };
    var token = tokenHandler.CreateToken(tokenDescriptor);
    return tokenHandler.WriteToken(token);
}

现有客户端解析的问题 #

你当前手动拆分JWT并解码Base64的方式存在以下不足：

• 未验证令牌签名，无法确保令牌未被篡改
• 手动处理Base64可能遇到填充字符缺失等边缘问题
• 没有标准化的方法提取Claims和处理过期逻辑

Angular端规范解析方案 #

推荐使用@auth0/angular-jwt库，它提供了开箱即用的JWT处理工具类，无需手动解析。

1. 安装依赖 #

npm install @auth0/angular-jwt

2. 配置模块 #

在Angular模块（如AppModule）中导入并配置JwtModule：

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

export function tokenGetter() {
  // 从本地存储或服务中获取令牌
  return localStorage.getItem('jwtToken');
}

@NgModule({
  imports: [
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        // 配置你的API域名，自动为请求添加Authorization头
        allowedDomains: ['your-api-domain.com'],
        disallowedRoutes: ['your-api-domain.com/login']
      }
    })
  ]
})
export class AppModule {}

3. 使用JwtHelperService核心方法 #

注入JwtHelperService后，可使用以下关键成员处理令牌：

• decodeToken(token: string): 解码令牌Payload，返回包含所有Claims的对象
• getTokenExpirationDate(token: string): 获取令牌的过期时间（Date类型）
• isTokenExpired(token: string, offsetSeconds?: number): 检查令牌是否已过期

4. 替换现有解析代码 #

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

// 在组件/服务中注入JwtHelperService
constructor(private jwtHelper: JwtHelperService) {}

// 处理令牌的方法
processJwtToken() {
  const token = this.accountValue.jwtToken;
  
  // 解码令牌Payload
  const decodedToken = this.jwtHelper.decodeToken(token);
  // 获取用户ID（对应后端的NameIdentifier Claim）
  const userId = decodedToken['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier'];
  
  // 获取过期时间并设置刷新超时
  const expirationDate = this.jwtHelper.getTokenExpirationDate(token);
  const timeout = expirationDate.getTime() - Date.now() - (60 * 1000); // 提前1分钟刷新
  
  this.refreshTokenTimeout = setTimeout(() => {
    this.refreshToken().subscribe();
  }, timeout);
}

额外说明 #

• 若需要验证令牌签名，可在JwtModule配置中添加tokenValidationHandler，传入你的密钥进行签名校验
• 建议将令牌存储在localStorage或sessionStorage中，配合拦截器自动为API请求添加Authorization头

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