Всем привет, меня зовут Николай, я представляю IT сообщество Работяги. В этом сообществе ты можешь поделиться своими проблемами в разработке и найти ответы на интересующие тебя вопросы из сферы IT. Ссылки на наши другие ресурсы вы можете найти в профиле нашего канала или в конце этой статьи.
В этой статье я хочу рассказать как сделать приватный роутинг в приложении на React с использованием react-router-dom v6.
При изучении React, и написании приложения с авторизацией, я столкнулся с проблемой, при которой не авторизованным пользователям доступны любые страницы в моем приложении, достаточно только прописать нужный путь, поэтому я начал искать варианты как я могу настроить приватный роутинг для страниц в моем приложении.
Для начала рассмотрим как настроить роутинг для имеющихся страниц в приложении, после подключения библиотеки react-router-dom нам необходимо обернуть <App/> в <Router>.
Далее в App.js определяем роуты для наших страницы.
Отлично, теперь когда роуты для наших страниц готовы, нужно понять как сделать все страницы, кроме страницы входа недоступными для не авторизованных пользователей.
Первое, что я сделал пошел изучать возможности библиотеки react-router-dom и нашел компонент Outlet, который вызывает вложенные маршруты, где у каждого могут быть свои дочерние маршруты. Отсюда родилась идея сделать компонент, который внутри себя будет содержать Outlet и обернуть в этот компонент роутинги для страниц, получилось что-то такое.
Я написал компонент PrivateRoute, в котором происходит проверка лежит ли в local storage токен, если да, значит пользователь авторизован и мы производим редирект на вложенную страницу, если токена нет, значит пользователь не авторизован и мы выполняем редирект на страницу входа.
Вот так теперь выглядит компонент App, роуты для страниц, которые должны быть доступны только для авторизованных пользователей мы написали внутри написанного ранее компонента PrivateRoute.
В целом этот вариант работает так как я и хотел, если пользователь не авторизован, и находясь на странице входа пытается ввести путь до страницы, которая доступна только для авторизованных пользователей он не сможет на нее попасть, потому что внутри компонента PrivateRoute произойдет редирект обратно на страницу входа, так как нет токена в local storage.
Но пока я реализовывал этот вариант, понял, что в целом проверку на токен модно проводить и в самом компоненте App и предоставлять нужный набор роутингов в зависимости от того есть токен или нет, но возникает проблема, в таком случае, когда у меня истечет токен во время нахождении на странице для авторизованного пользователя, не произойдет редиректа на страницу входа, я буду просто видеть пустую страницу. И тут на помощь приходит запись path=”*”, которая по сути отлавливает все неопределенные маршруты. Теперь рассмотрим как выглядит вариант с проверкой токена в компоненте App.
Теперь мы проверяем есть ли токен и в зависимости от результата проверки возвращаем нужный набор роутов, а запись <Route path="*" element={<Navigate to="/" replace={true} />} /> выполняет редирект на страницу входа, когда по каким-то причинам находясь на странице для авторизованного пользователя мы не смогли обновить токен.
Самое главное, при использовании обоих вариантов, необходимо своевременно удалять токен в local storage, так как может возникнуть ситуация, когда токен не был обновлен, но из local storage вы его не удалили, и по факту все страницы будут доступны пользователю, хотя он уже не должен быть авторизован.
Ссылки на наши ресурсы – ниже:
