Как отображать меню в зависимости от роли пользователя?

Question

[GaserV]

Всем привет! Я начал изучени ангуляра и столкнулся со след. ситуацией. Мне нужно, если например роут содержит в себе "/account/{any routes}" отобразить одно меню, если "/admin/{any routes}" - админское меню. Как такое сделать?)

Answer 1

[Ivan Stroykin]

Есть несколько вариантов, которые приходят в голову. Но так как отличие "account" и "admin" чаще всего не заканчивается один лишь только меню, считаю, что лучше всего подойдут обертки.

Для начала у нас есть 2 разных компонента меню, для разделов "account" и "admin". Пусть будут называться "app-user-menu" и ""
К примеру, создаем в /shared/layout/wrapper 2 компонента (обертки): user-wrapper и admin-wrapper

<!-- User Wrapper -->
<header></header>
<app-user-menu></app-user-menu>
<main>
  <router-outlet></router-outlet>
</main>
<footer><footer>

<!-- Admin Wrapper -->
<app-admin-header></app-admin-header>
<app-admin-menu></app-admin-menu>
<main>
  <router-outlet></router-outlet>
</main>
<footer><footer>

И в роутах оборачиваем дочерние компоненты в наши обертки

// routing
export const routes: Routes = [
  { path: 'account', component: UserWrapperComponent, children: [ ... ] }.
  { path: 'admin', component: AdminWrapperComponent, children: [ ... ] }
];

В итоге можно сделать полностью отличающуюся структуру для разных роутов. Добавляем на "admin" AuthGuard и вот уже доступ к разделу имеют только авторизованные пользователи

Comments

[GaserV]

Да. Я как-то думал в эту сторону но подощревал что, возможно, по-другому делается. Но спасибо)