Привет.
Вопрос, на самом деле, довольно стандартный, удивлён, что никто ничего не отвечает.
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>
