React+TypeScript验证JWT遇Webpack5缺失Node核心模块问题求解决

问题 #

使用React结合TypeScript验证JWT Token时出现编译错误，尝试过GitHub和Stack Overflow上的多种方案仍未解决。

相关代码 #

状态定义 #

const [decodedToken, setDecodedToken] = useState<null | JwtPayload | string>(null);

Token验证函数 #

const verifyToken = (token: string) => {
  try {
    // 解码Token
    const decoded = jwt.verify(token, `${process.env.REACT_APP_JWT_SECRET}`);

    // 检查Token是否有效
    if (decoded) {
      return decoded;
    }
  } catch (err) {
    // Token无效时返回null
    return null;
  }
};

初始化验证逻辑 #

useEffect(() => {
  const localToken = localStorage.getItem(
    `${process.env.REACT_APP_APPLICATION_NAME}-auth`
  );

  if (localToken) {
    const token = JSON.parse(localToken);
    const decoded = verifyToken(token.token);

    if (decoded) {
      // Token有效，将解码后的数据存入状态
      setDecodedToken(decoded);
    } else {
      // Token无效，跳转至登录页
    }
  }
}, []);

编译错误信息 #

编译失败:X
ERROR in ./node_modules/buffer-equal-constant-time/index.js 4:13-37
模块未找到: Error: 无法解析 '/home/hossain/Documents/projects/travel-hunter/client/node_modules/buffer-equal-constant-time' 中的 'buffer'

重大变更：Webpack < 5 曾默认包含Node.js核心模块的polyfill，现在不再如此。请确认是否需要该模块并配置polyfill。
若需要添加polyfill，需：
添加fallback配置 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
安装 'buffer'
若不需要polyfill，可使用空模块配置：resolve.fallback: { "buffer": false }

ERROR in ./node_modules/jsonwebtoken/sign.js 18:4-21
模块未找到: Error: 无法解析 '/home/hossain/Documents/projects/travel-hunter/client/node_modules/jsonwebtoken' 中的 'crypto'

重大变更：Webpack < 5 曾默认包含Node.js核心模块的polyfill，现在不再如此。请确认是否需要该模块并配置polyfill。
若需要添加polyfill，需：
添加fallback配置 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
安装 'crypto-browserify'
若不需要polyfill，可使用空模块配置：resolve.fallback: { "crypto": false }

解决方案 #

步骤1：安装所需依赖 #

在项目根目录执行以下命令：

npm install buffer crypto-browserify

或使用yarn：

yarn add buffer crypto-browserify

步骤2：配置Webpack #

如果是Create React App项目，需借助craco修改默认Webpack配置：

1. 安装craco开发依赖：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js，添加配置：

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          buffer: require.resolve('buffer/'),
          crypto: require.resolve('crypto-browserify'),
        },
      },
    },
  },
};

3. 修改package.json中的启动脚本，替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

如果是自定义Webpack配置的项目，直接在webpack.config.js的resolve.fallback中添加上述配置即可。

替代方案：使用前端友好的JWT库 #

若不想配置polyfill，可改用jose、jsrsasign这类专为浏览器环境设计的JWT库，它们无需依赖Node.js核心模块，可直接在前端使用。

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