集成JSON Web Token后WebSocket连接提前关闭问题求助

集成JSON Web Token（JWT）后出现「WebSocket连接建立前已关闭」错误，本地环境连接频繁断开，无法正常操作。结合你提供的代码和本地存储截图，问题集中在token传递逻辑、服务端验证规则以及代码语法上，具体修复方案如下：

客户端代码错误与修复 #

原客户端代码直接将sessionStorage对象赋值给token字段，导致传递的不是有效JWT字符串而是整个存储对象，服务端无法识别验证。

修复后代码：

const socket = io({
  extraHeaders: {
    token: sessionStorage.getItem('token') // 从sessionStorage中取出具体的token值
  }
});

服务端代码错误与修复 #

原服务端存在多处逻辑和语法问题：

1. 请求头获取路径错误：自定义头需从socket.handshake.headers获取，而非socket.handshake.auth.headers
2. token验证逻辑无效：服务端无法访问浏览器的sessionStorage，必须用JWT库验证token合法性
3. 语法不完整：io.use()回调未闭合就链式调用.on('connection')，导致代码执行异常
4. 变量作用域错误：connection回调无法访问io.use()内的token变量

修复后代码（需先安装依赖：npm install jsonwebtoken）：

const jwt = require('jsonwebtoken');
const SECRET_KEY = '你的JWT密钥'; // 需与生成token时使用的密钥保持一致

io.use((socket, next) => {
  // 从请求头中提取token
  const token = socket.handshake.headers.token;
  if (!token) {
    return next(new Error('请先登录'));
  }
  // 验证JWT token有效性
  jwt.verify(token, SECRET_KEY, (err, decoded) => {
    if (err) {
      return next(new Error('token无效，请重新登录'));
    }
    // 将解码后的用户信息挂载到socket，供后续业务使用
    socket.user = decoded;
    next();
  });
})
.on('connection', function(socket) {
  console.log('用户已连接:', socket.user);
  socket.on('message', function(message) {
    io.emit('message', message);
    console.log('收到消息:', message);
  });
});

关键注意事项 #

• 客户端必须传递具体的JWT字符串，而非sessionStorage对象
• 服务端需通过socket.handshake.headers获取自定义请求头
• 必须使用JWT库完成token合法性验证，不能直接与浏览器端存储对象做对比
• 保证代码语法完整，逻辑块闭合，变量作用域合理

本地存储截图 #

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