PricingLoginStart free
React Academy · Урок

Защищённые маршруты и охрана авторизации

Перенаправляйте неавторизованных пользователей на страницу входа с помощью обёрточных компонентов или защит на основе загрузчиков.

Урок 3 из 413 шагов

«Защищённые маршруты и охрана авторизации» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Зачем защищать маршруты

Некоторые страницы (панель управления, профиль и раздел администратора) должны быть доступны только аутентифицированным пользователям. React Router предоставляет два подхода: компоненты-обёртки и проверки на основе загрузчиков.

Структура состояния аутентификации

Сначала создайте context аутентификации, из которого компоненты смогут узнать, вошёл ли пользователь в систему.

const AuthContext = React.createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const login = async (creds) => { const u = await apiLogin(creds); setUser(u); };
  const logout = () => setUser(null);
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

Защита с помощью компонента-обёртки

Создайте компонент PrivateRoute, который проверяет аутентификацию и перенаправляет пользователя на страницу входа, если пользователь не прошёл аутентификацию.

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

function PrivateRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

// Usage in router:
{ element: <PrivateRoute />, children: [
  { path: '/dashboard', element: <Dashboard /> },
]}

Сохранение URL перенаправления

Сохраните URL, к которому пользователь пытался обратиться, чтобы после входа вернуть его туда. Передайте этот URL через свойство состояния компоненту Navigate.

function PrivateRoute() {
  const { user } = useAuth();
  const location = useLocation();
  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return <Outlet />;
}

// In login handler:
const location = useLocation();
const from = location.state?.from?.pathname || '/';
navigate(from, { replace: true });

Защита на основе загрузчика (Data Router)

В API Data Router добавьте проверку аутентификации в loader маршрута. Если пользователь не аутентифицирован, выбросьте перенаправление.

import { redirect } from 'react-router-dom';

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token) throw redirect('/login');
  return token;
}

const router = createBrowserRouter([
  {
    path: '/dashboard',
    loader: requireAuth,
    element: <Dashboard />,
  },
]);

Проверки на основе ролей

Расширьте проверку, добавив проверку ролей. Перенаправляйте пользователя на страницу отказа в доступе, если у него нет требуемой роли.

function AdminRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  if (user.role !== 'admin') return <Navigate to="/unauthorized" replace />;
  return <Outlet />;
}

Состояние загрузки во время проверки аутентификации

Если состояние аутентификации загружается асинхронно, например с сервера, показывайте индикатор загрузки, пока проверка ожидает завершения, чтобы пользователь не успевал увидеть страницу входа.

function PrivateRoute() {
  const { user, isLoading } = useAuth();
  if (isLoading) return <Spinner />;
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

Защита нескольких маршрутов одновременно

Объедините все защищённые маршруты под одной оболочкой PrivateRoute, чтобы не дублировать проверку для каждого маршрута.

const router = createBrowserRouter([
  { path: '/login', element: <Login /> },
  {
    element: <PrivateRoute />,
    children: [
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/profile', element: <Profile /> },
      { path: '/settings', element: <Settings /> },
    ],
  },
]);

Обработка истечения срока действия токена

Проверяйте срок действия token внутри проверки или глобального перехватчика и выполняйте выход пользователя, когда token истекает, перенаправляя его на страницу входа.

function isTokenValid(token) {
  const payload = JSON.parse(atob(token.split('.')[1]));
  return payload.exp * 1000 > Date.now();
}

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token || !isTokenValid(token)) throw redirect('/login');
  return token;
}

Поток обновления токена

Перед перенаправлением при ответе 401 попытайтесь обновить token. Перенаправляйте пользователя на страницу входа только в случае неудачи обновления.

async function requireAuth() {
  let token = localStorage.getItem('token');
  if (!token || isExpired(token)) {
    token = await refreshToken();
    if (!token) throw redirect('/login');
    localStorage.setItem('token', token);
  }
  return token;
}

Сохранение аутентификации после перезагрузки

Храните token аутентификации в localStorage или в файле cookie HttpOnly. При загрузке приложения восстановите состояние аутентификации до отображения защищённых маршрутов.

Быстрая проверка

Что следует выбросить при использовании проверки аутентификации на основе загрузчика в React Router, чтобы перенаправить неаутентифицированного пользователя?

Ответь в интерактивном уроке

Итоги

Защищайте маршруты с помощью оболочки PrivateRoute, использующей <Outlet />, или загрузчика, который выбрасывает redirect(). Сохраняйте исходный URL в состоянии навигации, обрабатывайте состояния загрузки, чтобы избежать кратковременного отображения страниц, и объединяйте защищённые маршруты, чтобы не дублировать код.

Можно начать бесплатно

Изучай React с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
88
Уроки
324
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Защищённые маршруты и охрана авторизации» бесплатный?

Да — полный текст урока «Защищённые маршруты и охрана авторизации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Защищённые маршруты и охрана авторизации»?

Перенаправляйте неавторизованных пользователей на страницу входа с помощью обёрточных компонентов или защит на основе загрузчиков. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Защищённые маршруты и охрана авторизации»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Вложенные маршруты и макеты Outlet
  2. Загрузчики и действия (API маршрутизатора данных)
  3. Защищённые маршруты и охрана авторизации
  4. Управление состоянием в параметрах поиска URL
← Назад к React Academy