Что такое маршруты-защита (protected routes), и как их настроить?
Этот вопрос проверяет понимание защищенных маршрутов
Короткий ответ
Маршруты-защита позволяют ограничивать доступ к компонентам или страницам. Они реализуются путем проверки условий (например, аутентификации) и перенаправления неавторизованных пользователей на другую страницу.
Длинный ответ
Маршруты-защита (protected routes) используются для предотвращения доступа к страницам без выполнения определенных условий, например, если пользователь не вошел в систему.
Пример реализации:
Создайте компонент защиты:
import { Navigate } from 'react-router-dom';
const ProtectedRoute = ({ isAuthenticated, children }) => {
return isAuthenticated ? children : <Navigate to="/login" />;
};Используйте компонент защиты в маршрутах:
import { Routes, Route } from 'react-router-dom';
const App = () => {
const isAuthenticated = /* Логика проверки аутентификации */;
return (
<Routes>
<Route path="/dashboard" element={
<ProtectedRoute isAuthenticated={isAuthenticated}>
<Dashboard />
</ProtectedRoute>
} />
<Route path="/login" element={<Login />} />
</Routes>
);
};
Преимущества:
- Упрощает управление доступом к маршрутам.
- Повышает безопасность, исключая доступ к закрытым ресурсам.