Как реализовать ролевую модель доступа на фронтенде? Как определяется, что показывать пользователю в зависимости от его прав (пермиссий)?

Основная концепция

Ролевая модель доступа (RBAC) на фронтенде — это способ управления видимостью и доступностью интерфейса в зависимости от прав текущего пользователя. Суть в том, что после аутентификации фронтенд получает информацию о ролях и пермиссиях пользователя, сохраняет её в состоянии приложения (например, в Redux или контексте React) и использует для условного рендеринга компонентов, кнопок, маршрутов и других элементов.

Определение прав обычно происходит через проверку наличия конкретной роли (например, 'admin') или конкретного разрешения (например, 'canEditPost') в объекте пользователя. Для этого создаются вспомогательные функции или хуки, которые инкапсулируют логику проверки.

Практическая реализация

Рассмотрим пример на React. Допустим, после логина мы получаем объект пользователя с массивом ролей и пермиссий:

const user = {
  roles: ['admin', 'editor'],
  permissions: ['createPost', 'deletePost']
};

Создадим хук для проверки прав:

function usePermission(permission) {
  const { user } = useAuth();
  return user?.permissions?.includes(permission) ?? false;
}

Теперь в компоненте можно условно отображать кнопку:

function PostActions({ postId }) {
  const canDelete = usePermission('deletePost');
  return (
    <div>
      <button>Edit</button>
      {canDelete && <button>Delete</button>}
    </div>
  );
}

Для маршрутов можно использовать защищённые обёртки, которые проверяют роль и перенаправляют на страницу входа или 403, если доступ запрещён.

Где применяется

Такой подход используется в админ-панелях, CRM-системах, корпоративных порталах и любых приложениях, где разные категории пользователей имеют разные уровни доступа. Он улучшает пользовательский опыт, скрывая нерелевантные функции, и упрощает навигацию.

Важное предостережение

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

Вывод

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