0
Приватные роуты в React
В современных веб-приложениях обеспечение конфиденциальности и безопасности определенных маршрутов является решающим аспектом. Мы не хотим, чтобы каждый имел доступ ко всем частям нашего веб-приложения. Для этого мы используем приватные маршруты, предоставляемые маршрутизатором React v6. В этой статье мы разберемся, что такое приватные маршруты, и реализуем их в примере приложения!
Что такое приватный и публичный роут?
Публичные маршруты — это маршруты, доступные любому пользователю. Для доступа к ним не требуется аутентификация.
С другой стороны, приватные маршруты доступны только аутентифицированным пользователям. Они требуют, чтобы пользователь вошел в систему для доступа к маршруту.
Реализация приватного роута
В этом разделе мы реализуем приватные роуты в простом проекте React! Для этого мы будем использовать Outlet компонент, предоставленный React Router 6. Это похоже на контейнер, содержащий различные части/компоненты нашей веб-страницы.
С помощью Outlet мы можем создать несколько небольших участков или «подмаршрутов» в пределах одного основного маршрута.
Теперь мы создадим PrivateRoutes.jsx файл в папке utils. Он проверяет, аутентифицирован ли пользователь или нет, прежде чем отображать защищенные/приватные роуты!
Вот код для этого:
//utils/PrivateRoutes.jsx
import { Outlet, Navigate } from 'react-router-dom'
const PrivateRoutes = () => {
const user = false; // Replace with your authentication logic
return user ? <Outlet/> : <Navigate to="/login"/>
}
Здесь, если пользователь аутентифицирован, он будет отображать приватные компоненты, используя <Outlet /> компонент, в противном случае он перейдет к /Login маршруту!
Примечание. Измените const user = false; деталь в соответствии с вашим проектом. В этом примере мы используем статическое значение, то есть False!Теперь мы завершим настройку маршрутизации, используя App.jsx созданные ранее приватные компоненты!
Вот код для этого:
import PrivateRoutes from './utils/PrivateRoutes'
function App() {
return (
<Router>
<Routes>
<Route path="/login" element={<Login/>}/>
<Route path="/register" element={<Register/>}/>
<Route element={<PrivateRoutes />}>
<Route path="/" element={<Home/>}/>
<Route path="/profile" element={<Profile/>}/>
</Route>
</Routes>
</Router>
);
}
Здесь мы поместили компоненты <Home /> и <Profile /> в приватные маршруты. Пользователь должен войти в систему, чтобы получить доступ к компоненту Home & profile.
Заключение
Если эта запись в блоге оказалась для вас полезной, поделитесь ею с теми, кому это может быть полезно. Спасибо за прочтение.
