Аутентификация входа в систему React с помощью JWT Access, токенов обновления, файлов cookie и Axios

• В этом уроке рассматривается аутентификация при входе в систему с использованием JWT access и токенов обновления.  

• После входа в систему, состояние авторизации будет отображаться в консоли.  

• В состоянии авторизации будут указаны имя пользователя, пароль, роли пользователя и токен доступа.  

• Токен обновления не будет храниться в локальном хранилище или состоянии авторизации, и JavaScript не сможет получить к нему доступ.  

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

• Компонент будет использовать состояние пользователя для отображения списка пользователей.  

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

• Если значение false, будет отображен элемент абзаца с сообщением о том, что пользователи не могут быть отображены.  

• В этом разделе используется эффект useEffect для получения состояния пользователя.  

• Эффект будет запускаться только при загрузке компонента.  

• Внутри эффекта будет создана переменная isMounted, которая будет установлена в true.  

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

• Функция getUser будет асинхронной и будет использовать axios для получения данных о пользователях.  

• Если запрос будет успешным, состояние пользователя будет установлено с полученными данными.  

• Определение функции и вызов get users.  

• Использование функции очистки в useeffect для установки значения is mounted равным false и прерывания запросов.  

• Создание функции обновления и использование токена обновления в пользовательском компоненте.  

• Тестирование работы функции обновления.  

• Экспорт const axios private и создание базового URL-адреса.  

• Прикрепление перехватчиков к частному экземпляру axios для обновления токенов.  

• Импорт созданного axios private и useeffect из react.  

• Определение функции обновления и подключение к useauth-хуку.  

• Возвращение закрытого экземпляра axios.  

• В видео обсуждается использование Axios Hook для обработки токенов JWT и повторных попыток запросов.  

• Перехватчики Axios Hook устанавливаются с помощью функции useEffect.  

• Перехватчики включают обработку ошибок и повторные попытки запросов.  

• Перехватчики Axios Hook удаляются с помощью функции очистки useEffect.  

• Очистка позволяет избежать накопления перехватчиков и предотвращает бесконечные циклы.  

• Axios Hook используется в пользовательском компоненте для обработки запросов и повторных попыток.  

• Axios Hook заменяет стандартный Axios, используемый в файле axios в каталоге API.  

• Джейн получает новый токен доступа, который заканчивается на "seven rg", и может просматривать список пользователей.  

• Если срок действия токена доступа истекает, токен обновления отправляется обратно в конечную точку обновления axios для получения нового токена доступа.  

• Если срок действия токена обновления истекает, пользователи должны повторно пройти аутентификацию.  

• React Router используется для отправки пользователей обратно на экран входа в систему и замены местоположения в истории браузера на предыдущее местоположение.  

• Джейн входит в систему, и срок действия ее токена доступа истекает через 10 секунд.  

• Если срок действия токена обновления истекает, Джейн возвращается на экран входа в систему.  

• После повторного входа в систему, Джейн должна сразу перейти к административному компоненту.