Angular интерфейс администратора

Question

Я новичок в Angular и программировании в целом (начался в этом году), и я строю веб-сайт, используя Angular (в качестве учебного проекта).

Я хотел бы добавить администратора Интерфейс для редактирования содержимого сайта (заголовок, текст и т. д. c ...)

Мне было интересно, смогу ли я сделать это, используя какой-нибудь div "hidden" на странице, которая появится, когда администратор входит в систему через службу аутентификации, или я могу сделать это только путем «дублирования» всего сайта, чтобы охранник перенаправил администратора в ту часть, где он может редактировать все, или я должен сделать указанный c интерфейс администратора, например, на WordPress .

Я на самом деле не ищу код, но идеи и лучшие практики от более опытных людей, чем я.

Спасибо за чтение, ура

Answer 1

для меня есть два варианта:

1.-Создайте отдельный модуль администратора и используйте loadChildren, чтобы ваши типичные маршруты стали такими:

const routes: Routes = [

  { path: 'One', Component:ComponentOne}
  ...
  { path: 'Admin', loadChildren: () => import('./admin/admin.module')
       .then(mod => mod.AdminModule) },
];

И ваш admin.router

const routes: Routes = [
  { path: 'Login', component: AdminLoginComponent },
  {
     path: '', component: AdminMainComponent, 
     canActivateChild: [AuthGuard],
     children: [...]
  }
]

2. -Заменить «каждый компонент» с помощью * ngIf, лучше использовать директиву, как этот пост Базеля Нетана ,

директива (я копирую) и вставить)

@Directive({selector: '[ifRole]'})
export class IfRoleDirective {
  user$ : Subscription;
  @Input("ifRole") roleName : string;

  constructor( private templateRef : TemplateRef<any>,
               private viewContainer : ViewContainerRef,
               private authService : AuthService ) {
  }

  ngOnInit() {
    this.user$ = this.authService.user
      .do(() => this.viewContainer.clear())
      .filter(user => user.role === this.roleName).subscribe(() => {
        this.viewContainer.createEmbeddedView(this.templateRef);
      });
  }

  ngOnDestroy() {
    this.user$.unsubscribe();
  }
}

И использовать

<div *ifRole="'admin'">
  Only for Admin
</div>

Answer 2

Реализация некоторой директивы [admin], которая зависит от реактивных данных, и элементов hide / show будет хорошим подходом. Вы можете применить его к элементам, которыми вы хотите управлять в зависимости от состояния текущего пользователя. Однако, если у вас есть набор определенных элементов c, это также хорошая возможность реализовать автономный модуль администратора с соответствующими представлениями