@GaserV

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

Всем привет! Я начал изучени ангуляра и столкнулся со след. ситуацией. Мне нужно, если например роут содержит в себе "/account/{any routes}" отобразить одно меню, если "/admin/{any routes}" - админское меню. Как такое сделать?)
  • Вопрос задан
  • 98 просмотров
Решения вопроса 1
StivinKing
@StivinKing
Есть несколько вариантов, которые приходят в голову. Но так как отличие "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 и вот уже доступ к разделу имеют только авторизованные пользователи
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы