Как реализовать систему ролей и прав доступа на фронтенде?

Основы ролевого доступа на клиенте

Роли и права доступа на фронтенде нужны для управления видимостью интерфейса и навигации в зависимости от уровня привилегий пользователя. Обычно после аутентификации сервер возвращает токен (например, JWT), в котором закодированы идентификатор пользователя и его роли. Фронтенд декодирует этот токен и сохраняет информацию о ролях в глобальном состоянии (Redux, Zustand, Context API).

Защита маршрутов

Для ограничения доступа к страницам применяются так называемые route guards. В React Router это реализуется через компонент-обёртку, который проверяет наличие нужной роли перед рендерингом целевой страницы. Если роль не подходит, пользователь перенаправляется на страницу логина или на страницу с ошибкой 403.

const ProtectedRoute = ({ role, children }) => {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  if (role && !user.roles.includes(role)) {
    return <Navigate to="/403" replace />;
  }
  return children;
};

// Использование
<Route path="/admin" element={
  <ProtectedRoute role="admin">
    <AdminPanel />
  </ProtectedRoute>
} />

Условный рендеринг элементов

Для скрытия кнопок, ссылок или целых блоков используется проверка прав в JSX. Например, кнопка удаления доступна только модераторам. Это делается через функцию hasPermission, которая сверяет права пользователя с требуемыми.

const canDelete = hasPermission(user, 'delete_post');
{canDelete && <button onClick={handleDelete}>Удалить</button>}

Практические рекомендации

Храните роли в отдельном модуле, чтобы избежать дублирования строк. Используйте константы для названий ролей и прав. Для сложных систем можно создать хук usePermissions, который возвращает функции проверки. Важно не доверять фронтенду в вопросах безопасности: все критические действия должны проверяться на сервере.

Вывод

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