Проблемы с JWT и .identify в React

У меня есть раздвоенный this: https://github.com/ammarnadeeem/diaryExpress-react-flask-mysql, и у меня есть некоторые проблемы с responsejs и получением информации профиля, когда я пытаюсь войти в учетную запись пользователя. В моем MySQL зарегистрирован пользователь, пароль, адрес электронной почты и т. д., Но похоже, что с токеном произошла ошибка. Вот мой код:

  componentDidMount() {
    const token = localStorage.usertoken;
    const { identity } = jwt_decode(token);
    this.setState({
      first_name: identity.first_name,
      last_name: identity.last_name,
      email: identity.email,
    });
  }

Это ошибка:

> TypeError: Cannot read property 'first_name' of undefined
> Profile.componentDidMount src/components/Profile.js:22   19 | const
> token = localStorage.usertoken;   20 | const { identity } =
> jwt_decode(token);   21 | this.setState({
> > 22 |   first_name: identity.first_name,   23 |   last_name: identity.last_name,   24 |   email: identity.email,   25 | }); View
> compiled ▶ 17 stack frames were collapsed. ./src/index.js
> src/index.js:7    4 | import App from './App';    5 | import
> registerServiceWorker from './registerServiceWorker';    6 | 
> >  7 | ReactDOM.render(<App />, document.getElementById('root'));    8 | registerServiceWorker();    9 |    10 |  View compiled ▼ 6 stack
> frames were expanded.
> __webpack_require__ /home/basileus/diaryExpress-react-flask-mysql/webpack/bootstrap
> 2773a34b4f4e3e36f9f0:678 fn
> /home/basileus/diaryExpress-react-flask-mysql/webpack/bootstrap
> 2773a34b4f4e3e36f9f0:88 0
> http://193.69.47.200:3000/static/js/bundle.js:76680:18
> __webpack_require__ /home/basileus/diaryExpress-react-flask-mysql/webpack/bootstrap
> 2773a34b4f4e3e36f9f0:678 (anonymous function)
> /home/basileus/diaryExpress-react-flask-mysql/webpack/bootstrap
> 2773a34b4f4e3e36f9f0:724 (anonymous function)
> http://193.69.47.200:3000/static/js/bundle.js:728:10 ▲ 6 stack frames
> were expanded. This screen is visible only in development. It will not
> appear if the app crashes in producti
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
31
4

Ответы 4

Что-то с {identity} - значит, вам нужно по-другому отсортировать?

Сессия вместо локальной?

Salazar 06.04.2021 23:41

Пока это {identity} - но зачем использовать {}. Уберите их, и я думаю, это сработает.

По данным jwt-decode.

var decoded = jwt_decode(token);
 
console.info(decoded);
 
/* prints:
 * { foo: "bar",
 *   exp: 1393286893,
 *   iat: 1393268893  }
 */

Следовательно, вы должны использовать

const identity = jwt_decode(token);

Спасибо, Салазар, за ответ:

For now it is { identity } - but why use {}. Take them away, and I think it would work.

Это была проблема.

Другие вопросы по теме