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

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

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
0
20
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

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

enter image description here

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

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.

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