如何将C# .NET生成JWT的代码转换为Angular 9的对应实现代码

重要提醒：绝对不要在前端生产环境代码中硬编码JWT签名密钥，任何人都可以通过调试前端源码获取密钥，导致签名伪造风险。以下代码仅适用于本地测试场景，生产环境JWT必须由后端服务签发。

实现步骤 #

1. 首先安装JWT处理依赖jose：

npm install jose

2. Angular侧对应TypeScript实现代码：

import * as jose from 'jose';

// 封装JWT生成方法
async function generateJwtToken(): Promise<string> {
  // 对应原C#代码的签名密钥，测试用请勿提交到生产环境
  const secretKey = "secretkey";
  const encoder = new TextEncoder();
  const encodedSecret = encoder.encode(secretKey);

  // 对应原C#代码的自定义claims
  const claims = {
    sampledata1: "testdata1",
    sampledata2: "testdata2"
  };

  // 用HS256算法签发JWT，和原C#逻辑完全对齐
  const token = await new jose.SignJWT(claims)
    .setProtectedHeader({ alg: 'HS256' })
    .sign(encodedSecret);

  return token;
}

3. Angular组件/服务中调用示例：

// 例如在组件初始化时调用
async ngOnInit() {
  const jwtToken = await generateJwtToken();
  console.log('生成的JWT：', jwtToken);
  // 后续你自己的业务逻辑，比如把token附加到请求头等
}

补充说明 #

如果你的实际需求是前端把后端签发的JWT附加到接口请求，完全不需要自己在前端生成JWT，直接在Angular的HTTP拦截器中统一给请求头加Authorization: Bearer ${你的后端返回的token}即可。

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