如何在Angular中生成JSON Web Token？@auth0/angular-jwt无jwt.sign类似功能

重要提醒：在前端（浏览器端）实现JWT签名存在极高安全风险。JWT签名需要用到私钥/密钥，直接存放在前端代码中会被所有访问用户轻易获取，攻击者可使用该密钥伪造任意JWT身份凭证，生产环境下请务必将JWT签名逻辑放在后端服务实现。

关于Angular生态的JWT签名库 #

目前没有专门面向Angular封装的JWT签名库，你正在使用的@auth0/angular-jwt本身就是为客户端JWT校验、解码场景设计的，官方没有提供签名功能，正是因为不推荐在前端执行签名操作。

前端实现JWT签名的方案 #

如果是本地测试、纯前端演示等非生产场景需要实现签名，不要使用适配Node.js环境的jsonwebtoken库，该库依赖Node原生crypto模块，无法直接在浏览器环境运行，推荐使用浏览器原生兼容的jose库实现，操作步骤如下：

1. 安装依赖

npm install jose

2. 签名示例代码（以HS256算法为例）

import * as jose from 'jose';

async function signJwt(payload: object, secret: string) {
  const encoder = new TextEncoder();
  const secretKey = encoder.encode(secret);
  
  const jwt = await new jose.SignJWT(payload)
    .setProtectedHeader({ alg: 'HS256' })
    .setExpirationTime('1h')
    .sign(secretKey);
  
  return jwt;
}

// 调用示例
// const token = await signJwt({ userId: 123, username: 'test' }, 'your_test_secret');

关于jsonwebtoken在Angular中的适配 #

如果一定要使用jsonwebtoken库，需要额外配置Node核心模块的Polyfill来补全浏览器缺失的API，该方案复杂度高、打包体积会明显增大，不推荐使用，仅作说明：

1. 安装所需polyfill包：npm install crypto-browserify stream-browserify buffer
2. 在angular.json中配置对应模块的别名，将Node原生模块指向polyfill实现
3. 在polyfills.ts中加入全局变量声明：

(window as any).global = window;
global.Buffer = global.Buffer || require('buffer').Buffer;
global.process = require('process');

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