Безопасно и удобно ли хранить токен jwt в Localstorage или файлах cookie и хранить данные пользователя в Context API?

Я создаю службу аутентификации в React и пытаюсь найти идеальную методологию хранения JWT из бэкэнда и хранения в файлах cookie или на локальном хосте, а также данных пользователя для хранения в контекстном API для доступа к данным пользователя через Интернет.

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

Ответы 3

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

Да, это лучший способ просто сохранить токен jwt в вашем локальном хранилище, потому что каждый API также имеет некоторые проверки аутентификации, поэтому, если кто-то попытается стереть этот токен, ваш API выдаст сообщение об ошибке. А для пользовательских данных вместо контекстного API я бы рекомендовал вам использовать избыточность для хранения пользовательских данных.

Спасибо за ответ, но как проверить, действителен ли токен, хранящийся в локальном хранилище? Я имею в виду проверить, аутентифицирован ли он, чтобы я мог получить доступ к определенным маршрутам?

n9p4 10.04.2022 11:20

для этого вам нужно разместить проверку от бэкэнда в API, это означает, что всякий раз, когда вы вызываете любой API, вам нужно просто передать этот токен в заголовке этого API в качестве заголовка авторизации, и если токен недействителен, тогда бэкэнд выдаст ошибку, что токен является недействительным

smith chokshi 10.04.2022 11:22

Таким образом, в основном каждый созданный API должен также быть запросом на действительность токена?

n9p4 10.04.2022 11:24

Нет, в каждом API просто передайте токен авторизации. Я прикрепляю одно изображение к ответу, пожалуйста, посмотрите.

smith chokshi 10.04.2022 11:27

Хорошо, спасибо за ответ.

n9p4 10.04.2022 11:31

Что касается хранения данных пользователя в Reduxer, когда я обновляю страницу, данные пользователя стираются, должен ли я продолжать с контекстом

n9p4 10.04.2022 14:52

Используйте contextApi, если вы хотите избежать детализации реквизитов или совместного использования реквизитов несколькими компонентами с помощью детализации. Он предназначен для совместного использования реквизитов в дереве компонентов.

Если ваш браузер обновится, ваши данные не будут сохранены, поэтому, если вы хотите поделиться данными со всеми страницами даже после обновления, рассмотрите возможность использования локального хранилища.

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

Ваш API должен вызываться в HOC или родительских компонентах, где oAuth можно использовать для проверки заголовка URL-адреса API и, соответственно, когда что-то изменяется, все ваши дочерние компоненты получат новые данные.

Если токен jwt не имеет личной информации, все в порядке. Токен Jwt должен иметь нечастную информацию. Если вы хотите, чтобы какая-то личная информация была передана jwt, вам следует использовать сеанс и файлы cookie.

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