React.js JWT Socket.io 身份验证答案

【问题标题】：React.js JWT Socket.io AuthenticationReact.js JWT Socket.io 身份验证
【发布时间】：2019-05-23 04:59:38
【问题描述】：

我正在尝试在 React 中使用带有 Express 后端的 Socket.io，该后端使用 JWT（Passport JWT）。在我通常的路线中，我的 Auth 没有问题。发送授权标头（授权承载令牌）并在后端检查，但是我根本不知道如何在从 React 客户端发送数据时包含承载令牌。

我查看了 extraHeaders 选项，但根本无法让它们工作。

这是我的代码：

class Chat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      username: "",
      message: "",
      messages: []
    };


    this.socket = io("localhost:5000", {
      extraHeaders: {
        Authorization: "My Bearer authorization_token_here"
      }
    });

    this.socket.on("RECEIVE_MESSAGE", function(data) {
      addMessage(data);
    });

    const addMessage = data => {
      console.log(data);
      this.setState({ messages: [...this.state.messages, data] });
      console.log(this.state.messages);
    };

    this.sendMessage = ev => {
      ev.preventDefault();
      this.socket.emit("SEND_MESSAGE", {
        author: this.state.username,
        message: this.state.message
      });
      this.setState({ message: "" });
    };
  }
  render() {jsx code here}

套接字连接已建立，但我不知道如何将令牌获取到服务器。理想情况下，我会在令牌中发送一个 ID，在服务器上对其进行解码并在我的数据库中查找有关该用户的更多信息。

节日快乐，感谢您提供任何帮助或提示如何解决我的问题。

【问题讨论】：

标签： reactjs express socket.io jwt passport.js

【解决方案1】：

根据，the documentation extraHeaders 只有在传输选项设置为轮询时才能在浏览器中工作。

所以在服务器端启用轮询并使用以下 sn-p

io({ 
  transportOptions: {
    polling: {
      extraHeaders: {  "Authorization": "My Bearer authorization_token_here" }
    },
  }
});

【讨论】：