Создание защищённых маршрутов для авторизации пользователей

Зачем нужны защищённые маршруты?

Защищённые маршруты (или protected routes) играют важную роль в любом современном веб-приложении, где требуется авторизация пользователей. Это страницы, доступ к которым возможен только для аутентифицированных пользователей. Например, в интернет-магазине страница "Профиль" или "Корзина" доступна только для авторизованных пользователей, в то время как главная страница или каталог продуктов открыты всем.

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

Основная идея реализации защищённых маршрутов

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

Основная логика выглядит так:

1. Проверить, авторизован ли пользователь (например, через флаг isAuthenticated или наличие токена в localStorage).
2. Если пользователь авторизован, рендерить защищённый компонент.
3. Если пользователь не авторизован, перенаправить его на страницу логина.

Реализация защищённого маршрута

Предположим, у нас есть простое приложение с двумя страницами: главная страница / и профиль /profile. Страница профиля доступна только для авторизованных пользователей.

Шаг 1: настройка маршрутов

Начнём с того, что создадим базовую структуру приложения с помощью react-router-dom:

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

const Home = () => <h1>Главная страница</h1>;
const Profile = () => <h1>Профиль</h1>;

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </Router>
  );
}

export default App;

На данный момент любой пользователь может посетить страницу /profile. Давайте добавим защиту.

Шаг 2: создание компонента ProtectedRoute

Создадим компонент ProtectedRoute, который будет проверять, авторизован ли пользователь:

import React from "react";
import { Navigate } from "react-router-dom";

// Типизация пропсов для компонента ProtectedRoute
interface ProtectedRouteProps {
  isAuthenticated: boolean; // Флаг авторизации пользователя
  children: React.ReactNode; // Дочерние компоненты (защищённый контент)
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ isAuthenticated, children }) => {
  if (!isAuthenticated) {
    // Если пользователь не авторизован, перенаправляем его на страницу логина
    return <Navigate to="/login" replace />;
  }

  // Если пользователь авторизован, рендерим защищённый контент
  return <>{children}</>;
};

export default ProtectedRoute;

Шаг 3: интеграция защищённого маршрута

Теперь используем компонент ProtectedRoute для защиты страницы профиля:

import React, { useState } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute";

const Home = () => <h1>Главная страница</h1>;
const Profile = () => <h1>Профиль</h1>;
const Login = () => <h1>Страница входа</h1>;

function App() {
  // Флаг авторизации пользователя (для примера зададим его вручную)
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route
          path="/profile"
          element={
            <ProtectedRoute isAuthenticated={isAuthenticated}>
              <Profile />
            </ProtectedRoute>
          }
        />
      </Routes>
    </Router>
  );
}

export default App;

Теперь, если пользователь не авторизован isAuthenticated = false, при попытке открыть /profile он будет перенаправлен на страницу /login.

Шаг 4: обработка авторизации

Для реализации контроля авторизации можно использовать различные методы: токены, куки, локальное состояние и т.д.

Пример с использованием токена из localStorage:

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
  const token = localStorage.getItem("authToken");

  if (!token) {
    return <Navigate to="/login" replace />;
  }

  return <>{children}</>;
};

Типичные ошибки и их предотвращение

Работа с защищёнными маршрутами может вызывать несколько проблем:

1. Несогласованное состояние авторизации. Если вы храните состояние авторизации в нескольких местах (например, в localStorage и Redux), то это может привести к расхождению данных. Лучше использовать централизованное хранилище (например, Redux, Context).

2. Бесконечный цикл перенаправлений. Если страница логина сама защищена и требует авторизации, это может привести к бесконечному перенаправлению. Убедитесь, что страницы логина всегда доступны.

3. Утечка данных. Защищённый компонент может быть загружен до проверки авторизации. Чтобы этого избежать, оборачивайте компоненты в Suspense и показывайте индикатор загрузки до завершения проверки.

Пример: улучшение защищённых маршрутов

Допустим, у нас есть асинхронный процесс проверки авторизации пользователя (например, через API). Давайте добавим проверку авторизации с использованием хука:

import React, { useState, useEffect } from "react";
import { Navigate } from "react-router-dom";

const useAuth = () => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);

  useEffect(() => {
    // Имитация запроса на сервер для проверки авторизации
    setTimeout(() => {
      const token = localStorage.getItem("authToken");
      setIsAuthenticated(!!token);
    }, 1000);
  }, []);

  return isAuthenticated;
};

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
  const isAuthenticated = useAuth();

  if (isAuthenticated === null) {
    return <h1>Проверка авторизации...</h1>;
  }

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return <>{children}</>;
};

Этот подход позволяет показать пользователю индикатор загрузки во время проверки авторизации.

Применение на практике

Создание защищённых маршрутов — это необходимый навык в разработке современных приложений. Такие маршруты активно используются:

• в e-commerce приложениях (управление заказами, профили пользователей),
• в дашбордах и административных панелях,
• в мобильных приложениях на React Native.

Для продвинутой логики авторизации вам пригодится интеграция с API, работа с JWT и использование middleware в Redux.

1

Задача

Модуль 3: React, 9 уровень, 7 лекция

Недоступна

Создание базового защищённого маршрута

Создание базового защищённого маршрута

Открыть

1

Задача

Модуль 3: React, 9 уровень, 7 лекция

Недоступна

Асинхронная проверка авторизации

Асинхронная проверка авторизации

Открыть