Как реализовать проверку прав доступа на маршрутах (authorization)?

Этот вопрос проверяет, как внедрить логику проверки прав доступа для ограничения маршрутов

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

Проверка прав доступа (authorization) добавляется к маршрутам, где доступ предоставляется только при соответствии роли или разрешению. Это реализуется с помощью проверки перед рендерингом компонента.

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

Права доступа можно проверить, добавив условие к защищенному маршруту. Например, используя роли:

 

Компонент для проверки ролей:

const RoleProtectedRoute = ({ userRole, allowedRoles, children }) => {
  return allowedRoles.includes(userRole) ? children : <Navigate to="/unauthorized" />;
};

Пример маршрута с авторизацией:

const App = () => {
  const userRole = "admin"; // Пример текущей роли
  
  return (
    <Routes>
      <Route path="/admin" element={
        <RoleProtectedRoute userRole={userRole} allowedRoles={['admin']}>
          <AdminPanel />
        </RoleProtectedRoute>
      } />
      <Route path="/unauthorized" element={<Unauthorized />} />
    </Routes>
  );
};

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

- Позволяет легко управлять доступом на основе ролей.

- Обеспечивает гибкость в реализации сложных сценариев безопасности.

Уровень

  • Рейтинг:

    4

  • Сложность:

    8

Навыки

  • React Router

    React Router

Ключевые слова

Подпишись на React Developer в телеграм