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

Question

[eyrad4]

Ребята всем привет. Подскжите как правильно реализовать функционал с уровнем доступа и разным интерфесом пользователей (для смежных ролей интерфейс будет одинаковый, будут лишь некоторые ограничесния).

Например:
СуперАдмин (видит все)
Админ (видит все, но не может ничего удалить)

Менеджер (видит заказы)
Помощник менеджера (не может удалять, редактировать, создавать и т.д.)

Оператор (видит обращения с службу поддержки)

Старший маркетлог (видит всю стататситику)
Маркетолог по какому-то бренду (видит только статистику по бренду, заказы этого бренда и т.д.)

Как я представляюю себе данную реализацию
1. у каждой роли есть свой основной роут (super-admin, admin, manager), после авторизации в зависимости от роли перенаправляем пользователя в нужно место, при помощи canActivate ограничен доступ
2. у смежных ролей общие ui, но разные права доступа и router-module
3. все компоненты планирую делать глупыми, а в pages их компоновать как нужно
4. Пока не пойму где правильно хранить сервисы и модели данных, что бы потом не запутаться

структура такая:
shared
-components
pages
- super-admin
--dashboard (админский дашборад)
--orders
--settings
- admin
--dashboard (админский дашборад)
--orders
--settings
- manager
--dashboard (менеджерский дашборад)
--orders
- manager-lite
--dashboard (менеджерский дашборад с другим набором виджетов)
--orders

Кто более опытный может подскажите правильно ли я мыслю или совсем не то. Возможно у вас был опыт реализации подобного функциоанала, и вы сможете им поделиться. За любую помощь буду благодарен.

Взможно правильнее смотреть в сторону monorepo nx.dev/angular
тогда каждая роль будет в отдельном репо и репо с базовыми переиспользуемыми компонентами

Спасибо!

Answer 1

[Виктор П.]

Привет.
Вопрос, на самом деле, довольно стандартный, удивлён, что никто ничего не отвечает.
1. Сервис пользователя (говорю только про ангуляр) должен быть глобальным. То есть, после аутентификации с бекенда у вас должна придти полная модель пользователя, включающая список доступных ролей (реализации тут могут быть совершенно различные). Глобальный сервис позволяет получить набор ролей пользователя из любого места программы.
2. Ограничения на страницу вешаются через RouteGuard. Почитайте подробнее в поисковике. По сути, там обычный класс, в который вы прокидываете зависимость от глобального сервиса пользователя и внутри разбираете, какие роли присутствуют и может ли попасть на текущую страницу
Включается этот волшебный охранник в роутах, например:

{
                            path: 'recipient',
                            component: RecipientComponent,
                            canActivate: [LoginRouteGuard],
                            data: {roles: ['Admin'], title: 'Список получателей'}
                        }

3. Guard запрещает именно переход по какому-то роуту, если нет доступных ролей. Саму же кнопку сделать неактивной, либо невидимой сделать труда не представляет? Так же прокидываем глобальный сервис пользователя, пишем метод проверки на определённую роль (роли), вешаем на visible или disabled
4. Есть момент с содержимым. Если есть такая возможность, то желательно не намешивать в одном компоненте разные представления, то есть, делать разные компоненты и роуты, например OrdersManagers, OrdersAdmins. Так проще работать. Если нет такой возможности, например, с дашбордом, делаете корневой компонент, в него уже включаете через ngIf или ngSwitchCase все доступные компоненты для разных ролей. Естественно, с проверкой, что требуется отображать

<div *ngSwitchCase="'WidgetCargoInworkComponent'">
                <app-widget-cargo-inwork></app-widget-cargo-inwork>
            </div>
            <div *ngSwitchCase="'WidgetInvoicesNotpaidComponent'">
                <app-widget-invoices-notpaid></app-widget-invoices-notpaid>
            </div>
            <div *ngSwitchCase="'WidgetWaybillsComponent'">
                <app-widget-waybills></app-widget-waybills>
            </div>

Comments

[eyrad4]

Большое вам спасибо!