Как правильно хранить токен jwt пользователя в React

Каков наилучший, самый безопасный и профессиональный способ сохранить токен jwt пользователя после входа в React?

Я вижу, что многие люди говорят, что использование localStorage — это хороший способ.

Например:

localStorage.setItem("token", "ey.......")

Другие советуют использовать библиотеку вроде Redux или других.

Может ли кто-нибудь посоветовать мне?

Спасибо

сохранить его в файле cookie

Sachila Ranawaka 20.11.2022 15:37

Не храните конфиденциальную информацию в токене jwt, в идеале храните некоторый идентификатор и храните токен доступа в некотором контексте и храните токены обновления поставщиками удостоверений на сервере и отправляйте пользователю некоторый зашифрованный токен на месте в исходный токен обновления для хранения на клиенте.

Azzy 20.11.2022 15:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
108
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Redux не имеет встроенного постоянного хранилища. Это означает, что при обновлении страницы ваш ключ может быть утерян, и вам необходимо повторно войти в систему (авторизоваться) еще раз. Нет "правильного" пути, есть "желаемое поведение".

Как вам уже было предложено в комментариях, вы также можете использовать куки в качестве хранилища ключа, и я думаю, что это один из наиболее предпочтительных способов на данный момент, так как это довольно безопасное решение.

Redux имеет промежуточное ПО для сохранения своего состояния. Там вы можете выбрать, какое хранилище вы хотите использовать в качестве долговременного хранилища.

Но я бы не рекомендовал вам добавлять редукцию в проект только для того, чтобы она была.

И есть хороший ответ о разнице между самыми популярными браузерными хранилищами.

Внимательно прочитайте и выбирайте разумно, между ними есть некоторые существенные различия, такие как область действия и безопасность.

Спасибо за этот конструктивный ответ. +1

joswxc 20.11.2022 15:51

Хотя хранить данные в localStorage — не самый плохой выбор. На мой взгляд, самым лучшим, безопасным и профессиональным способом будет следовать руководству OWASP.

Они предлагают использовать sessionStorage с отпечатком пальца браузера в качестве меры предосторожности вместе с CSP.

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

React Redux Toolkit — можем ли мы отправить/вызвать действие одного редуктора на действие другого редуктора, чтобы изменить переменную состояния
Свойство useSelector возвращает значение undefined
Как получить сетку SyncFusion с пользовательской привязкой для отображения/скрытия счетчика
Ожидал 0 аргументов, но получил 1 в редукции с машинописным текстом
Руководство по переходу с react-redux v5 на v8
Визуализировать элементы из массива объектов, используя другой массив с идентификаторами: ошибка ts и рекомендации
Попытка переключить логическое значение Redux нажатием кнопки, однако переключение работает только в первый раз, и я не уверен, почему
Redux Saga: аргумент типа «строка» не может быть назначен параметру типа «TakeableChannel <неизвестно>»
Запрос передачи Redux-saga и параметры для тела POST
Получить постоянный accessToken Redux-Persists в файле определения API запросов RTK — хранить регидратацию, отличную от уровня компонентов