Как получить доступ к данным из токена, хранящегося в локальном хранилище, в React

Question

Я использую стек MERN и Redux. У меня есть jwtToken, сохраненный в локальном хранилище, когда пользователь входит в систему. У меня есть форма для отправки информации, и одно из свойств в этой форме - это автор, который я хочу автоматически заполнить идентификатором пользователя, который вошел в систему. Для доступа эту форму необходимо авторизовать, чтобы информация всегда была там. Кто-нибудь знает, как мне это сделать? Это то, что у меня есть только что, но это не работает. Помимо сохранения в локальном хранилище, он доступен через глобальное состояние, но опять же, я действительно не знаю, как получить доступ к этому или какой вариант лучше использовать.

class AddSubject extends Component {
  constructor() {
    super();
    const user = localStorage.getItem("jwtToken");
    this.state = {
      title: "",
      summary: "",
      description: "",
      author: user._id,
      errors: {},
    };
  }

Answer 1

Вам нужно декодировать токен и получить user_id. Попробуйте это:

const jwt_decode = require('jwt-decode');
class AddSubject extends Component {
  constructor() {
    super();
    const token = localStorage.getItem("jwtToken");
    const data = jwt_decode(token);
    this.state = {
      title: "",
      summary: "",
      description: "",
      author: data.user._id,
      errors: {},
    };
  }

Answer 2

В жизненном цикле вашего componentDidMount:

window.localStorage.getItem(token)

Answer 3

Поскольку вы используете redux для управления данными, лучше хранить декодированные данные токена из localStorage в redux store во время инициализации приложения. Таким образом, информация о пользователе доступна глобально, и вам не нужно обращаться к локальному хранилищу каждый раз, когда компонент монтируется, а другие компоненты, требующие отображения информации о пользователе, также могут делиться ею из глобального хранилища.

Answer 4

Не уверен, но может вам помочь:

class AddSubject extends Component {
  constructor() {
    super();
    this.state = {
      title: "",
      summary: "",
      description: "",
      author: localStorage.getItem("jwtToken")._id || '',
      errors: {},
    };
  }