Что такое маршруты-защита (protected routes), и как их настроить?

Question

Маршруты-защита позволяют ограничивать доступ к компонентам или страницам. Они реализуются путем проверки условий (например, аутентификации) и перенаправления неавторизованных пользователей на другую страницу.

YeaHub · Accepted Answer

Маршруты-защита (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>
  );
};

Преимущества:

- Упрощает управление доступом к маршрутам.

- Повышает безопасность, исключая доступ к закрытым ресурсам.

Что такое маршруты-защита (protected routes), и как их настроить?

Короткий ответ

Длинный ответ

Что такое маршруты-защита (protected routes), и как их настроить?

Короткий ответ

Длинный ответ