能否在浏览器中使用jsonwebtoken库？遇process未定义错误如何解决？

jsonwebtoken库是为NodeJS环境设计的，依赖Node专属的process等API，所以在浏览器中直接使用会出现未定义错误，以下是几种可行的解决方法：

方案1：改用浏览器兼容的JWT库 #

直接换用专门适配浏览器环境的JWT处理库，比如jose或jsrsasign，这些库不依赖NodeJS的API。以jose为例，你的验证逻辑可以修改为：

import { jwtVerify } from 'jose';

isTokenNeedRefresh: async (seconds: number) => {
    const accessToken = localStorage.getItem(WheelGlobal.ACCESS_TOKEN_NAME);
    if (!accessToken) return true;
    const { payload } = await jwtVerify(accessToken, new TextEncoder().encode("secret"));
    const exp = payload.exp as number;
    const now = Math.floor(Date.now() / 1000);
    const isExpired = exp < now + seconds;
    return isExpired;
}

注意jose的核心API是异步的，需要配合async/await使用。

方案2：配置构建工具注入process对象 #

如果一定要使用jsonwebtoken，可以通过构建工具模拟process对象，填补浏览器环境的缺失：

Webpack配置 #

在webpack.config.js中添加DefinePlugin：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process': JSON.stringify({})
    })
  ]
};

Vite配置 #

在vite.config.ts中添加define配置：

import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    'process': {}
  }
});

这种方法能解决process未定义的错误，但jsonwebtoken中一些依赖Node文件系统、加密模块的高级功能在浏览器中仍无法使用，仅适用于基础的签名验证场景。

方案3：手动解码JWT（仅适用于无需验证签名的场景） #

如果你的需求只是读取令牌的exp字段，不需要验证签名的合法性（注意：此方法跳过签名验证，存在安全风险，仅在完全信任令牌来源时使用），可以手动解码：

isTokenNeedRefresh: (seconds: number) => {
    const accessToken = localStorage.getItem(WheelGlobal.ACCESS_TOKEN_NAME);
    if (!accessToken) return true;
    // 提取JWT的payload部分
    const payloadBase64 = accessToken.split('.')[1];
    // 处理URL安全的Base64编码并解码
    const decodedPayload = atob(payloadBase64.replace(/-/g, '+').replace(/_/g, '/'));
    const tokenData = JSON.parse(decodedPayload);
    const exp = tokenData.exp;
    const now = Math.floor(Date.now() / 1000);
    const isExpired = exp < now + seconds;
    return isExpired;
}

这种方法不需要依赖任何第三方库，但完全不验证令牌的真实性，若令牌可能被篡改，绝对不能使用此方法。

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