Я использую контекст React для сохранения состояния приложения, JWT для аутентификации и React Router для маршрутизации.
JWT имеет жесткое время истечения, скажем, 30 минут.Я проверяю срок действия каждый раз, когда пользователь посещает маршрут, поэтому, если срок действия токена истек до того, как вы перейдете к следующему маршруту, вы будете перенаправлены для входа в систему.Это работает нормально, но если пользователь находится на какой-то странице и срок действия его токена истекает, и он делает вызов API, находясь на странице, как он узнает, в чем проблема?Я могу обрабатывать 401/403 в ответ на каждый вызов API и на основе этого setState в компоненте, который использует эти вызовы API.Но я хотел бы сделать это без того, чтобы каждый компонент пытался перехватить 401/403 и установить состояние.
Я планирую написать перехватчик axios для добавления заголовков Auth к исходящим запросам и проверки ошибок AUTH в ответах API.Итак, у меня есть перехватчик, который проверяет, является ли ответ 401 или 403.
Этот перехватчик находится за пределами кода React, что означает, что он не может визуализировать какой-либо компонент напрямую или перенаправить пользователя для входа в систему с помощью React Router.
Я посмотрел на подобные вопросы, и они предлагают некоторые обходные пути, но ни один из них не кажется надежным или хорошим способом сделать это.
React Router + Axios interceptors.Как сделать перенаправление?
Как перенаправить с перехватчика axios с реагирующим маршрутизатором V4?
- Одним из предложений является настройка аксиосперехватчик в вашем корневом компоненте, так что он может установить какое-то состояние, когда происходит 401/403.Мне это нравится с точки зрения удобства использования, но не с точки зрения организации кода.
- Люди, которые используют Redux, могут получить доступ к хранилищу вне React и использовать его для отправки действия, которое приводит пользователя к странице входа.Я не думаю, что это возможно при использовании React Context для управления состоянием.
- Другие предложения включают использование window.location.href или history.push, оба из которых, похоже, работают в некотором роде, но непомочь с перенаправлением пользователя на ту же страницу после входа в систему.
Я пытаюсь создать решение, которое легко работает с тем, как React Router работает с приложением. Например, React Router запоминает местоположение из, и яможно использовать это для перенаправления пользователя на предыдущую страницу после входа в систему, но если я использую window.location.href = "/" или history.push ('/'), то пользователь отправляется на домашнюю страницу, откуда он перенаправляетсяна страницу входа, но теперь предыдущая страница является домашней страницей, а не там, где произошла ошибка.Кажется, я не могу отслеживать предыдущее местоположение так же, как React Router.