Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про React Router: auth, security

Как реализовать проверку прав доступа на маршрутах (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

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

#auth

#security

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