Angular 8中jsonwebtoken的global、process未定义问题解决问询

原 jsonwebtoken 报错修复步骤 #

按顺序补全浏览器环境缺失的Node.js全局polyfill，解决连续抛出的未定义错误：

• 首先在src/polyfills.ts顶部添加已尝试的全局映射代码：

  (window as any).global = window;
  

• 解决新增的process is not defined报错：
  1. 执行安装命令引入process兼容包：npm install process --save
  2. 继续在src/polyfills.ts中补充process全局模拟逻辑：

     (window as any).process = {
       env: { DEBUG: undefined },
       version: '0.10.0'
     };
     

• 如果后续仍抛出Buffer未定义的报错，额外执行npm install buffer --save，再在src/polyfills.ts中添加：

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

推荐替代方案（无polyfill兼容负担） #

jsonwebtoken本身是为Node.js服务端环境设计的，依赖大量Node.js核心模块，强行补全polyfill会大幅增加前端打包体积，且前端硬编码签名密钥存在安全风险，更推荐使用无Node依赖的浏览器端JWT实现：

• 首选替代库：jsrsasign
  1. 执行安装命令：

     npm install jsrsasign --save
     npm install @types/jsrsasign --save-dev
     

  2. 直接引入即可实现与jwt.sign一致的功能，无需修改任何polyfill配置：

     import * as KJUR from 'jsrsasign';
     
     // 对应jsonwebtoken的HS256签名场景
     const header = { alg: 'HS256', typ: 'JWT' };
     const payload = { sub: 'user123', exp: Math.floor(Date.now() / 1000) + 3600 };
     const secretKey = 'your-signature-secret';
     const signedToken = KJUR.jws.JWS.sign('HS256', JSON.stringify(header), JSON.stringify(payload), secretKey);
     

• 如果仅需要HMAC类轻量签名，也可以基于crypto-js手动拼接JWT结构实现，进一步减小包体积。

生产环境建议将JWT签名逻辑放在后端服务完成，前端仅存储、携带后端返回的token即可，避免前端暴露签名密钥。

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