Как эффективно управлять аутентификацией JWT (обновление и токены доступа) в React без повторных вызовов сервера и реализовать централизованную систему оповещения
Я работаю над приложением React, которое требует JWT-аутентификации с использованием токенов доступа и обновления. Я хочу управлять процессом аутентификации таким образом, чтобы предотвратить многократные запросы токена обновления и плавно обрабатывать истечение срока действия токена. Кроме того, я хочу централизовать систему оповещений для обработки успешных, ошибочных и информационных сообщений во всем приложении. ** Чего я хочу добиться:**
JWT Authentication:
Правильная обработка токенов доступа и обновления в приложении React. Когда срок действия маркера доступа истекает, я хочу обновить его с помощью маркера refresh, но без повторных запросов к серверу или возникновения условий гонки.
Автоматическое повторение первоначального запроса после обновления маркера доступа. Централизованная система оповещения:
Мне нужна система оповещений, которая может обрабатывать и отображать сообщения об ошибках из ответов API (как вложенных, так и не вложенных). Система оповещений должна быть доступна глобально во всех компонентах. Оповещения должны динамически запускаться на основе различных ответов (ошибка, успех и т.д.).
Проблема: Я использую Djoser для работы с бэкендом и react для работы с фронтендом. Я запутался в том, как управлять механизмом обновления токена, не делая повторных обращений к серверу и не вызывая условий гонки. Я также пытаюсь реализовать централизованную систему оповещений, которая будет работать глобально для всех ответов от сервера, включая структурированную обработку различных типов ошибок.
это код, который я использую для экземпляра axios и запутался в том, как эффективно обрабатывать токен refresht
это система оповещения мой подход заключается в получении сообщений об ошибках непосредственно из компонента, а затем отображать их с соответствующим извлечением из ответа
Что касается управления JTW.
Недавно я реализовал подобный поток в клиентском приложении React, которое обрабатывает аутентификацию с помощью пары токенов access/refresh. Вы можете посмотреть его здесь: https://github.com/zavvdev/fe-infra.
В принципе, я сделал это с помощью axios + axios-retry flow, где:
- Каждый запрос, вернувший ответ
invalid_token, должен быть повторен (но определенное количество времени, чтобы предотвратить бесконечные повторы). Повторные попытки для мутационных запросов также включены, но только для этого типа запросов. - Во время повторных запросов обновление токена запускается только один раз в течение определенного периода, чтобы предотвратить множественные запросы на обновление токена.
- После успешного обновления - все ранее неудавшиеся запросы будут повторно обработаны с новым токеном, если обновление было успешно завершено в течение указанного периода времени.
Для получения более подробной информации проверьте репо выше. Надеюсь, это поможет.