React+Socket.io如何实现用户登录后才建立带JWT鉴权的连接

现有写法存在两个核心问题，直接导致你描述的故障：

• Socket连接初始化逻辑写在模块顶层，只要这个JS文件被项目引入，页面加载时就会立刻执行连接，完全不会判断当前用户是否已经登录、有没有有效JWT
• JWT的读取逻辑只在模块首次加载时执行一次，后续用户登录完成往localStorage写入新token时，已经初始化的Socket实例既不会重新读取最新token，也不会自动重新发起连接，只能靠刷新页面重新执行模块代码才能拿到新token建立连接

1. 改造客户端Socket逻辑 #

不要在顶层导出提前初始化好的Socket实例，把连接逻辑放到React Context Provider里，跟着登录状态走，检测到有效JWT时才发起连接，登出/无token时自动断开连接。
改造后的客户端代码：

import React, { useEffect, useMemo, useState } from 'react';
import { io } from 'socket.io-client';
import { SOCKET_IO_URL } from '../api/config';

export const SocketContext = React.createContext({
  socket: null,
  isConnected: false
});

// 把这个Provider套在路由组件外层，注意要放在你管理登录状态的Provider内层
export const SocketProvider = ({ children }) => {
  const [socket, setSocket] = useState(null);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    // 每次effect执行都读取最新的token，不要在模块顶层一次性读
    const userProfile = JSON.parse(localStorage.getItem('profile'));
    const currentToken = userProfile?.token;

    // 无有效token时，清理已存在的连接，直接返回不发起新连接
    if (!currentToken) {
      if (socket) {
        socket.disconnect();
        setSocket(null);
        setIsConnected(false);
      }
      return;
    }

    // 存在有效token才初始化Socket连接
    const socketInstance = io(SOCKET_IO_URL, {
      query: { token: currentToken },
      reconnection: true,
      reconnectionAttempts: 5,
    });

    // 绑定连接状态事件
    socketInstance.on('connect', () => {
      setIsConnected(true);
      console.log('Socket连接成功，连接ID：', socketInstance.id);
    });

    socketInstance.on('disconnect', () => {
      setIsConnected(false);
    });

    // 重连时强制更新为最新token，避免token过期/更新后鉴权失败
    socketInstance.io.opts.query = { token: currentToken };

    setSocket(socketInstance);

    // 清理函数：token变化/组件卸载时断开旧连接，避免内存泄漏
    return () => {
      socketInstance.disconnect();
      setSocket(null);
      setIsConnected(false);
    };
  // 实际项目中建议把全局登录状态（比如Redux/Context里存的profile）作为依赖，比直接监听localStorage更可靠
  }, [localStorage.getItem('profile')]);

  const contextValue = useMemo(() => ({
    socket,
    isConnected
  }), [socket, isConnected]);

  return (
    <SocketContext.Provider value={contextValue}>
      {children}
    </SocketContext.Provider>
  );
};

业务组件里需要用Socket的时候，直接引入SocketContext用useContext取值即可，不需要自己再初始化实例。

2. 修复服务端逻辑漏洞 #

现有服务端代码鉴权失败断开连接后没有终止逻辑执行，会导致鉴权失败的连接依然会绑定后续的事件监听，存在安全隐患，加个return即可：

const jwt = require('jsonwebtoken'); // 提前引入jwt依赖

io.on('connection', (socket) => {
  const token = socket.handshake.query.token;
  try {
    if (!token) throw new Error("TOKEN NOT FOUND")
    jwt.verify(token,'secret') 
  } catch (error) {
    console.log('Socket鉴权失败，主动断开连接')
    socket.disconnect()
    return; // 终止后续逻辑执行
  }
  console.log('Socket连接成功', socket.id)

  socket.on('request_fetch', () => {
    socket.broadcast.emit('response_fetch')
  })
})

改造后完全不需要手动刷新页面：

• 页面初始加载时如果用户未登录，不会发起任何Socket连接
• 用户登录成功、localStorage写入有效token后，useEffect会自动触发，初始化Socket连接完成鉴权
• 用户登出清除登录态后，会自动断开现有Socket连接，不会残留未鉴权的连接

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