Управление доступом в React: Ролевая маршрутизация для начинающих

Понимание ролевой маршрутизации

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

Шаг 1: Создание ролей и данных пользователя
Для начала создайте простой объект, который будет имитировать текущего пользователя и его роль.

const currentUser = {

  name: "John Doe",

  role: "admin", // Возможные роли: "user", "admin", "guest"

};

Шаг 2: Определение маршрутов
Маршруты в React можно организовать с помощью react-router-dom. Установите эту библиотеку, если она еще не добавлена, с помощью команды:

npm install react-router-dom

Создайте основные маршруты:

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



function App() {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<HomePage />} />

        <Route path="/admin" element={<AdminPage />} />

        <Route path="/user" element={<UserPage />} />

        <Route path="*" element={<NotFoundPage />} />

      </Routes>

    </Router>

  );

}

Шаг 3: Создание компонентов страниц
Для каждой страницы создайте отдельные компоненты, например:

function HomePage() {

  return <h1>Welcome to the Home Page</h1>;

}



function AdminPage() {

  return <h1>Welcome, Admin!</h1>;

}



function UserPage() {

  return <h1>Hello, User!</h1>;

}



function NotFoundPage() {

  return <h1>404 - Page Not Found</h1>;

}

Настройка ролевого доступа

Теперь, когда маршруты и страницы готовы, добавим проверку ролей.

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

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



function ProtectedRoute({ element, allowedRoles }) {

  if (!allowedRoles.includes(currentUser.role)) {

    return <Navigate to="/" replace />;

  }

  return element;

}

Шаг 5: Использование ProtectedRoute
Обновите настройки маршрутов, чтобы использовать новый компонент:

<Routes>

  <Route path="/" element={<HomePage />} />

  <Route

    path="/admin"

    element={<ProtectedRoute element={<AdminPage />} allowedRoles={["admin"]} />}

  />

  <Route

    path="/user"

    element={<ProtectedRoute element={<UserPage />} allowedRoles={["user", "admin"]} />}

  />

  <Route path="*" element={<NotFoundPage />} />

</Routes>

Теперь только пользователи с ролью admin смогут зайти на /admin, а /user будет доступна как для пользователей, так и для администраторов.

Расширение функциональности

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

Шаг 6: Создание контекста аутентификации
Добавьте новый контекст:

import { createContext, useContext, useState } from "react";



const AuthContext = createContext();



export function AuthProvider({ children }) {

  const [user, setUser] = useState({ name: "John Doe", role: "guest" });



  const login = (newUser) => setUser(newUser);

  const logout = () => setUser({ name: "", role: "guest" });



  return (

    <AuthContext.Provider value={{ user, login, logout }}>

      {children}

    </AuthContext.Provider>

  );

}



export function useAuth() {

  return useContext(AuthContext);

}

Шаг 7: Подключение контекста
Обновите App:

function App() {

  return (

    <AuthProvider>

      <Router>

        <Routes>

          <Route path="/" element={<HomePage />} />

          <Route

            path="/admin"

            element={<ProtectedRoute element={<AdminPage />} allowedRoles={["admin"]} />}

          />

          <Route

            path="/user"

            element={<ProtectedRoute element={<UserPage />} allowedRoles={["user", "admin"]} />}

          />

          <Route path="*" element={<NotFoundPage />} />

        </Routes>

      </Router>

    </AuthProvider>

  );

}

Шаг 8: Управление входом и выходом
Теперь добавьте кнопки для входа и выхода на главной странице:

function HomePage() {

  const { user, login, logout } = useAuth();



  return (

    <div>

      <h1>Welcome to the Home Page</h1>

      {user.role === "guest" ? (

        <>

          <button onClick={() => login({ name: "Admin", role: "admin" })}>

            Login as Admin

          </button>

          <button onClick={() => login({ name: "User", role: "user" })}>

            Login as User

          </button>

        </>

      ) : (

        <>

          <p>Logged in as: {user.name} ({user.role})</p>

          <button onClick={logout}>Logout</button>

        </>

      )}

    </div>

  );

}

Теперь приложение готово управлять доступом пользователей к разным маршрутам на основе их ролей!

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