Как реализовать guard, который проверяет авторизацию пользователя и при её отсутствии перенаправляет на страницу входа?

Guard (защитник маршрута) — это механизм, который перехватывает переход по маршруту и решает, можно ли пользователю туда попасть. В SPA-приложениях на React это обычно компонент-обёртка, который проверяет наличие токена или флага авторизации и либо рендерит дочерний маршрут, либо перенаправляет на страницу входа.

Зачем нужен guard

• Централизует логику проверки доступа в одном месте.
• Не даёт неавторизованному пользователю увидеть защищённый контент.
• Сохраняет исходный URL, чтобы после логина вернуть пользователя обратно.

Пример на React Router v6

import { Navigate, useLocation } from 'react-router-dom';

function RequireAuth({ children }) {
  const location = useLocation();
  const token = localStorage.getItem('token');

  if (!token) {
    // сохраняем текущий путь, чтобы вернуться после логина
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return children;
}

// Использование в роутере
<Route path="/dashboard" element={
  <RequireAuth><Dashboard /></RequireAuth>
} />

Возврат после логина

На странице входа можно прочитать location.state.from и после успешной аутентификации выполнить navigate(from, { replace: true }). Это улучшает UX: пользователь попадает туда, куда изначально шёл.

Проверка ролей

Тот же паттерн расширяется до проверки ролей: guard принимает массив разрешённых ролей и сравнивает с ролью пользователя. Если роль не подходит — редирект на 403 или главную.

Итог: guard стоит применять во всех приложениях с закрытыми разделами — он делает код чище, безопаснее и предсказуемее, а логика доступа живёт в одном месте.