Узнайте, как создать многоразовый пользовательский хук React для обнаружения просроченных сеансов пользователей (токенов доступа) и соответствующим образом обновить их, а также исправить ошибку «недействительный сеанс: срок действия токена доступа истек», как профессионал.

Что такое токен доступа?

Современные приложения с полным стеком обычно используют токены доступа JWT для поддержания сеансов без сохранения состояния между сервером и клиентом (пользователем).

Сеансы без сохранения состояния не требуют от нас хранения каких-либо данных, связанных с сеансом, на сервере, вместо этого мы предоставляем нашим пользователям (клиентам) зашифрованный токен, который может быть создан только нашими серверами (используя СЕКРЕТНЫЙ ключ ), чтобы наши пользователи могли получить доступ к нашему приложению в течение ограниченного периода времени.

Зачем нам нужно истекать срок действия токена доступа?

Если пользователь использует токен доступа с истекшим сроком действия после истечения срока действия, мы просто возвращаем ошибку 401: Несанкционированный запрос! пользователю. Это помогает нам убедиться, что наши сгенерированные токены доступа не могут быть использованы не по назначению, так что даже если хакер получит доступ к токену доступа, он не сможет использовать его в течение длительного времени.

Зачем нам нужно обновлять наши токены доступа?

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

Как мы можем обработать ошибку 401 Unauthorized Request в React Query, когда срок действия токена доступа истекает?

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

Создайте собственный хук React Query поверх хука useQuery.

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

Все параметры (аргументы) останутся такими же, как и при использовании useQuery в наших компонентах, как показано в строках 3 и 4 в следующем фрагменте кода.

Создайте собственный хук React Query поверх хука useMutation.

Точно так же мы создадим пользовательский хук для хука useMutation, чтобы всякий раз, когда мы выполняем мутацию, если ответ возвращает «Ошибка несанкционированного запроса» с кодом состояния 401, мы могли просто обработать это. используя следующий хук. Все остается прежним, все параметры (аргументы) и возвращаемый объект такие же, как и раньше, просто теперь у нас есть собственная логика для обработки конкретной ошибки.

Как использовать пользовательские хуки в наших компонентах?

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

На линии нет. 38 мы видим, что ничего не изменилось, мы используем useAuthedQuery точно так же, как обычный хук useQuery.

Заключение

Цель этого блога — не только продемонстрировать способность обрабатывать ошибку 401, но и показать, как мы можем создавать собственные хуки поверх любого хука и добавлять необходимую нам бизнес-логику в соответствии с нашими потребностями, без избыточного упоминать об этом каждый раз, когда мы его используем.

Прежде чем вы спросите, вот ссылка на репозиторий GitHub (с соответствующей веткой: /react-query-custom-hooks).

Я надеюсь, что этот блог стоил вашего времени, если да, пожалуйста, не забудьте поставить аплодисменты этой статье, чтобы она дошла до соответствующей аудитории и энтузиастов-разработчиков, таких как вы.

Чтобы увидеть больше подобного контента, нажмите зеленую кнопку Подписаться и свяжитесь со мной в LinkedIn.