Срок действия токена Reactjs
Я делаю одностраничный веб-сайт с логином с помощью Reactjs. Проблема в том, как и где сохранить время истечения срока действия токена. Нужно ли мне сохранять в sessionStore, но при закрытии браузера все данные будут удалены. Местный магазин? Но тогда данные будут навсегда. Или я могу сохранить в localStore, и в каждом случае мне нужно добавить функцию, которая проверяет время истечения срока из localStore, когда событие запускается, успешно обновляет локальный магазин снова? но код будет выглядеть ужасно ... а как насчет проблем с производительностью? Приемлем ли этот подход?
Да, подход приемлем и подходит для реализации. Вы также можете рассмотреть возможность использования файлов cookie. Но пусть код не выглядит ужасно: P, создайте другой файл для выполнения всех сеансовых действий / функций.
Ответы 1
Вы используете Redux && Redux thunk?
Если да, то вот подход, которому я следовал:
- Когда пользователь вошел в систему, я сохраняю токены доступа и обновления в Магазине.
- Я использую редукция-настойчивость для хранения токенов в localStorage (есть и другие хранилища), чтобы сохранять их, когда пользователь обновляет / повторно открывает приложение.
- Наличие промежуточного программного обеспечения, которое проверяет, действителен ли токен доступа, перед каждым запросом API.
- Если срок его действия истек, попробуйте обновить токен доступа, используя токен обновления.
- Если срок его действия не истек, просто выполните запрос API.
- Если пользователь выходит из системы или оба токена истекли, я очищаю Store (и localStorage через redux-persist).
Более подробную информацию о приведенном выше потоке вы можете проверить в исходном ответе (откуда я черпал вдохновение): https://stackoverflow.com/a/36986329/4312466
Если вы не используете библиотеки управления состоянием:
Это вариант следовать приведенной выше идее, но вместо того, чтобы иметь хранилище, промежуточное ПО и использовать redux-persist, вы можете:
- Храните жетоны в
localStore. - Создайте в своем приложении слой (класс, функцию или что угодно), который будет выступать в качестве промежуточного программного обеспечения. Каждый раз, когда вы хотите вызвать API, вы сначала вызываете этот уровень, который проверяет, действителен ли токен:
- И если это так, только тогда сработает запрос API.
- Если срок действия токена истек, этот уровень будет держать все дальнейшие запросы API в очереди, пытаясь обновить токен.
Однако, если вы используете SPA и имеете сложные операции с состоянием, я рекомендую вам использовать некоторую библиотеку управления состоянием.
Вам просто нужно установить интервал для вызова функции обновления время от времени в вашем основном компоненте
componentDidMount().