将 httponly cookie 中的 JWT Auth Token 发送到 socket.io 服务器

Question

我正在项目中制作一个聊天窗口，它需要身份验证（以显示姓名、头像等个人资料信息）。我已经在两端设置了 JWT 身份验证。目前，我客户端的令牌存储为 httponly cookie。

我正在服务器端（Express）设置socket.io，但我不知道如何将我的 JWT 发送到服务器。我相信我应该只在连接时发送一次（如果我错了，请纠正我），但我看不到任何发送它的方法。

我还在前端使用 React（如果这很重要），并在前端使用 socket.io-client。

Answer 1

我也为此苦苦挣扎，但我想我找到了解决方案😃

Express服务器

在 Express Cookie 和 SocketIO Server 构造函数之间共享 Cookie 选项😊

import { createServer } from 'http';

import express from 'express';
import { Server } from 'socket.io';
import cookieParser from 'cookie-parser';

export const cookieOptions: CookieOptions = {
    httpOnly: true,
    sameSite: 'lax',
    secure: true,
};

const app = express();

app.get('/auth', (request, response, next) => {
    const authToken = 'uuid'; // <-- your secret

    // If I didn't set this, the cookie would expire before I could use it
    cookieOptions.expires = !(
        // type Date (e.g. now + 7 days)
        response.cookie('authToken', authToken, cookieOptions)
    );
});

const server = createServer(app);
const io = new Server(server, { cors: corsOptions });

io.on('connection', (socket) => {
    const cookiesString = socket.handshake.headers.cookie ?? '';
    const cookies = cookie.parse(cookiesString);
    const authToken = cookies.authToken ?? null;

    console.log({ authToken }); // <-- here is the auth token :D

    socket.on('disconnect', () => {
        console.log('user disconnected');
    });

    socket.on('message', (data) => {
        console.log(data);
    });
});

反应客户端

withCredentials: true

<-- this one fixed it for me 😃

是否包含凭据（cookie、授权标头、 TLS 客户端证书等）以及跨域 XHR 轮询请求

const App () => {
    useEffect(() => {
        const serverHost = import.meta.env.VITE_SERVER_HOST as string;
        const socket = io(serverHost, { withCredentials: true });

        socket.on('connect', () => {
            console.log('connected');
            socket.emit('message', 'Hello, server!');
        });

        socket.on('message', (data) => {
            console.log('Received message:', data);
        });

        return () => {
            socket.disconnect();
        };
    }, [])

    return <h1>Hello Socket IO</h1>
}

这是一个非常简单的例子，希望对您有所帮助！