如何修复Vue项目中jsonwebtoken/sign.js的instanceof右侧非对象错误？

问题根源 #

你遇到的错误核心原因有两点：

1. crypto-browserify并未完整实现Node.js原生crypto模块的KeyObject类，导致jsonwebtoken执行secretOrPrivateKey instanceof KeyObject时，KeyObject不是有效对象，触发报错。
2. @azure/web-pubsub是服务端SDK，不应该在浏览器环境（Vue前端）中直接使用——前端仅需依赖@azure/web-pubsub-client，令牌生成逻辑必须放在后端执行，避免密钥泄露。

修复步骤 #

1. 清理前端不必要的依赖 #

卸载前端项目中不需要的服务端依赖：

npm uninstall @azure/web-pubsub crypto-browserify

2. 简化Webpack配置 #

移除webpack.config.js中fallback里的crypto配置，清理后配置如下：

fallback: {
  "stream": require.resolve("stream-browserify"),
  "buffer": require.resolve("buffer"),
  "child_process": false
}

3. 后端生成客户端连接令牌 #

在你的Node.js后端服务中，使用@azure/web-pubsub生成安全的客户端连接令牌，前端通过API接口获取该令牌。

后端示例代码：

const { WebPubSubServiceClient } = require("@azure/web-pubsub");

async function generatePubSubToken() {
  const serviceClient = new WebPubSubServiceClient(
    "你的Web PubSub连接字符串",
    "你的Hub名称"
  );
  const tokenResult = await serviceClient.getClientAccessToken();
  return tokenResult.url; // 返回给前端的带令牌的连接地址
}

4. 前端使用令牌初始化WebPubSubClient #

前端仅保留@azure/web-pubsub-client依赖，通过后端返回的令牌初始化客户端：

import { WebPubSubClient } from "@azure/web-pubsub-client";

async function initChatClient() {
  // 从后端API获取连接地址
  const res = await fetch("/api/get-pubsub-token");
  const connectionUrl = await res.text();
  
  const client = new WebPubSubClient(connectionUrl);
  // 后续实现聊天消息订阅、发送逻辑
}

临时测试方案（不推荐用于生产） #

如果暂时无法搭建后端，仅用于本地测试，可以通过以下方式临时规避错误：

1. 安装浏览器兼容的JWT库：

npm install jwt-browserify

2. 修改Webpack配置，添加别名替换：

resolve: {
  alias: {
    "jsonwebtoken": "jwt-browserify"
  },
  fallback: {
    "buffer": require.resolve("buffer"),
    "stream": require.resolve("stream-browserify"),
    "child_process": false
  }
}

注意：此方式会将连接字符串暴露在前端代码中，存在严重安全风险，禁止用于生产环境。

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