前端WebSocket如何传递Authorization: Bearer？具体步骤是怎样的？

在前端使用 WebSocket 传递 Authorization: Bearer 令牌，通常是为了进行身份验证：

1. 获取令牌

首先，你需要从服务器获取 Bearer 令牌，一般在用户登录成功后，服务器会返回这个令牌。可以将其存储在本地，如 localStorage 或 sessionStorage 中。示例代码如下：

// 假设登录成功后返回了令牌
const loginResponse = {
    token: 'your_bearer_token_here'
};
// 将令牌存储在 localStorage 中
localStorage.setItem('bearerToken', loginResponse.token);

2. 创建 WebSocket 连接

在创建 WebSocket 连接时，无法直接在请求头中设置 Authorization: Bearer 信息，因为 WebSocket 握手阶段不支持自定义请求头。不过，可以通过在 URL 中添加查询参数来传递令牌。示例代码如下：

// 从 localStorage 中获取令牌
const token = localStorage.getItem('bearerToken');
// 创建 WebSocket 连接，将令牌作为查询参数添加到 URL 中
const socket = new WebSocket(`ws://your-websocket-server-url?token=${token}`);

3. 服务器端验证

在服务器端，需要解析 URL 中的查询参数，获取令牌并进行验证。以下是使用 Node.js 和 ws 库的示例代码：

const WebSocket = require('ws');
const http = require('http');

const server = http.createServer();
const wss = new WebSocket.Server({ noServer: true });

server.on('upgrade', (request, socket, head) => {
    // 解析 URL 获取查询参数
    const url = new URL(request.url, 'http://localhost');
    const token = url.searchParams.get('token');

    // 验证令牌
    if (token === 'your_bearer_token_here') {
        wss.handleUpgrade(request, socket, head, (ws) => {
            wss.emit('connection', ws, request);
        });
    } else {
        socket.destroy();
    }
});

wss.on('connection', (ws) => {
    ws.send('WebSocket connection established');
    ws.on('message', (message) => {
        console.log(`Received: ${message}`);
    });
});

server.listen(8080, () => {
    console.log('Server is listening on port 8080');
});

4. 建立连接后传递令牌（可选）

如果不希望通过 URL 传递令牌，也可以在 WebSocket 连接建立后，通过发送消息的方式传递令牌。示例代码如下：

const token = localStorage.getItem('bearerToken');
const socket = new WebSocket('ws://your-websocket-server-url');

socket.addEventListener('open', (event) => {
    // 连接建立后发送包含令牌的消息
    socket.send(JSON.stringify({
        type: 'authentication',
        token: token
    }));
});

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

在服务器端，需要处理接收到的消息，解析出令牌并进行验证。以下是使用 Node.js 和 ws 库的示例代码：

const WebSocket = require('ws');
const http = require('http');

const server = http.createServer();
const wss = new WebSocket.Server({ noServer: true });

server.on('upgrade', (request, socket, head) => {
    wss.handleUpgrade(request, socket, head, (ws) => {
        wss.emit('connection', ws, request);
    });
});

wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        const data = JSON.parse(message);
        if (data.type === 'authentication') {
            const token = data.token;
            // 验证令牌
            if (token === 'your_bearer_token_here') {
                ws.send('Authentication successful');
            } else {
                ws.send('Authentication failed');
                ws.close();
            }
        } else {
            console.log(`Received: ${message}`);
        }
    });
});

server.listen(8080, () => {
    console.log('Server is listening on port 8080');
});

综上所述，前端使用 WebSocket 传递 Authorization: Bearer 令牌可以通过 URL 查询参数或建立连接后发送消息的方式实现，服务器端需要对令牌进行验证以确保安全性。