Next.js应用验证JWT令牌触发TypeError错误，求解决方法

这个错误通常是因为使用的JWT库在浏览器客户端环境存在兼容性问题，或者导入/使用方式有误，以下是具体解决办法：

1. 替换为浏览器兼容的JWT库（推荐） #

jsonwebtoken 是为Node.js环境设计的，在浏览器客户端使用容易出现兼容性问题。建议换成完全支持浏览器的 jose 库：

• 安装依赖：

npm install jose
# 或 yarn add jose

• 修改验证代码：

import { useEffect } from 'react';
import { jwtVerify } from 'jose';

useEffect(() => {
  const verifyToken = async () => {
    let token = localStorage.getItem("jqToken") || "";
    let result: any = "";
    try {
      if (token) {
        const { payload } = await jwtVerify(token, new TextEncoder().encode("SECRETEKEY"));
        result = payload;
      }
    } catch (error) {
      console.log(error, "ERR");
    }
    console.log("first", result);
  };

  verifyToken();
}, []);

2. 若坚持使用jsonwebtoken，修复兼容性问题 #

如果必须使用jsonwebtoken，需要处理浏览器环境的依赖缺失问题：

• 确保导入方式正确：

import jwt from 'jsonwebtoken'; // 使用默认导入，不要用解构导入

• 配置Next.js的webpack以添加浏览器polyfill：
  在项目根目录的next.config.js中添加：

module.exports = {
  webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      buffer: require.resolve('buffer'),
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
    };
    return config;
  },
};

• 安装对应的polyfill依赖：

npm install buffer crypto-browserify stream-browserify

3. 额外优化：避免空令牌验证 #

当token为空字符串时，提前跳过验证可以减少不必要的错误捕获：

useEffect(() => {
  let token = localStorage.getItem("jqToken") || "";
  let result: any = "";
  if (!token) {
    console.log("No token found");
    return;
  }
  try {
    // 验证逻辑
  } catch (error) {
    console.log(error, "ERR");
  }
  console.log("first", result);
}, []);

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