How to correctly implement the functionality of user roles with a different interface in Angular?

Question

Angular

Hello guys. Please tell me how to correctly implement the functionality with the access level and different user interfaces (for adjacent roles, the interface will be the same, there will be only some restrictions).

For example:
SuperAdmin (sees everything)
Admin (sees everything, but cannot delete anything)

Manager (sees orders)
Assistant Manager (cannot delete, edit, create, etc.)

Operator (sees support requests)

Senior Marketing Log ( sees all statistics)
Marketer for some brand (sees only brand statistics, orders of this brand, etc.)

How I imagine this implementation
1. each role has its own main route (super-admin, admin, manager), after authorization, depending on the role, we redirect the user to the right place, using canActivate access is limited
2. adjacent roles have common ui, but different access rights and router -module
3. I plan to make all the components stupid, and arrange them in pages as needed
4. Until I understand where to store the services and data models correctly, so that I don’t get confused later,

the structure is like this:
shared
-components
pages
- super-admin
--dashboard ( admin dashboard)
--orders
--settings
- admin
--dashboard (admin dashboard)
--orders
--settings
- manager
--dashboard (manager dashboard)
--orders
- manager-lite
--dashboard (manager dashboard with a different set of widgets)
--orders

Someone more experienced can tell me if I'm thinking right or not at all. Perhaps you had experience in implementing such a functionality, and you can share it. I will be grateful for any help.

Perhaps it's more correct to look towards monorepo nx.dev/angular
then each role will be in a separate repo and repo with basic reusable components

Thank you!

Answer 1

Hello.
The question is actually pretty standard, surprised no one answers anything.
1. User service (I'm talking only about Angular) should be global. That is, after authentication from the backend, you should receive a complete user model, including a list of available roles (implementations here can be completely different). The global service allows you to get a set of user roles from anywhere in the program.
2. Restrictions on the page are hung up through RouteGuard. Read more in the search engine. In fact, there is an ordinary class into which you throw a dependency on the user's global service and inside you analyze which roles are present and whether it can get to the current page
. This magic guard is included in the routes, for example:

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

3. Guard prohibits the transition to some route if there are no available roles. Is it easy to make the button itself inactive or invisible? We also forward the global user service, write a method for checking for a specific role (roles), set it to visible or disabled
4. There is a moment with the content. If there is such an opportunity, then it is advisable not to mix different views in one component, that is, to make different components and routes, for example, OrdersManagers, OrdersAdmins. It's easier to work that way. If this is not possible, for example, with a dashboard, you make a root component, you already include all available components for different roles through ngIf or ngSwitchCase. Naturally, with a check of what needs to be displayed

<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>