TGViewer
Frontend | Иван Усынин Frontend | Иван Усынин @usyninis_dev · 118 subscribers
Post #228 82
RBAC и permission-based проверки на frontend: как мы управляем доступом на проекте 🔐

В больших системах требуется гибкая и масштабируемая модель прав. Классическая проверка доступа строится вокруг ролей: пользователь получает одну или несколько ролей (например, admin, manager, viewer), и каждая роль содержит набор разрешений.

Однако при использовании такого подхода появляются проблемы:
- Роли начинают разрастаться и дублировать друг друга.
- Возникают “почти одинаковые” роли с минимальными отличиями.
- Сложно управлять точечными исключениями: если одному пользователю нужно дать доступ только к одной дополнительной кнопке, добавлять новую роль становится избыточно.

Чтобы решить эту задачу и избежать подобных проблем мы используем комбинацию RBAC (Role-Based Access Control) и permission-based подхода ⚙️

У нас есть два уровня:

1 уровень — группы пользователей (можно назвать их ролями: admin, manager, top-manager и т.д).

Это верхнеуровневая агрегация прав. Группа содержит набор доступных для неё permissions.

2 уровень — permissions (разрешение на выполнение действия)

Это атомарные флаги, которые описывают конкретное действие:
- user.edit
- order.create
- order.cancel
- feature.toggleX

Конечный пользователь в итоге получает список доступных permissions через включение его в группы + индивидуальные permissions.

Как это выглядит на frontend

После аутентификации backend возвращает список permissions пользователя. Frontend не работает напрямую с кодами групп/ролей — только с уже “развернутыми” permissions.

const canEdit = usePermission('user.edit');

return <Plate>{canEdit && <EditButton />}</Plate>;


Такой подход даёт баланс между управляемостью и гибкостью: роли упрощают администрирование, permissions позволяют точно контролировать поведение интерфейса, а изменение прав пользователей осуществляется без доработок front/back-сервисов ✨
  • 👍 5
  • 🔥 1
More from @usyninis_dev
  1. Sep 21, 2026cva: когда обычного сlsx уже мало Пока у кнопки два состояния — «обычная» и «выключенная»…
  2. Jul 17, 2026Remotion: make videos programmatically 📹 Remotion — это программный фреймворк, который по…
  3. Apr 12, 2026Выступил с лекцией в ITHub В минувшую субботу в колледже информационных и креативных техно…
  4. Mar 8, 2026Поздравляю прекрасных дам с 8 Марта! Пусть весна цветет не только на улице, но и в душе! Н…
  5. Mar 2, 2026React.lazy — еще один полезный сценарий 🚀 Одни из самых популярных кейсов использования R…
  6. Feb 7, 2026TanStack Query — польза инструмента на практике Более 2 лет назад мы стартанули с нуля раз…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →