React.js Аутентификация JWT Socket.io - PullRequest
Новая
       51

React.js Аутентификация JWT Socket.io

0 голосов
/ 23 декабря 2018

Я пытаюсь использовать Socket.io в React с Express Backend, который использует JWT (Passport JWT).На моих обычных маршрутах у меня нет проблем с моей аутентификацией.Заголовок авторизации отправляется (токен носителя авторизации) и проверяется на бэкэнде, однако я просто не понимаю, как включить токен носителя при отправке данных из React Client.

Я просмотрел 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}

Соединение с сокетом настроено, однако я понятия не имею, как получить токенна сервер.В идеале я отправляю идентификатор в токене, декодирую его на сервере и ищу дополнительную информацию о пользователе в моей БД.

С праздником, и я благодарен за любую помощь или подсказки, как решить мою проблему,

1 Ответ

0 голосов
/ 14 апреля 2019

В соответствии с документация extraHeaders будет работать только в браузерах, если для параметра транспорта установлено значение опроса.

, поэтому включите опрос на стороне сервера и используйте следующий фрагмент 

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