He desarrollado proyectos de acceso a 4 roles en angular. El tablero tiene diferentes páginas de contenido. Cada vez que iniciaba sesión en el portal, inicialmente se llamaba página de panel.
El contenido de este tablero se mostrará según la función del usuario registrado. He usado ngSwitch . Cualquiera conoce una implementación de forma diferente en lugar de usar ngSwitch . Comparta amablemente su respuesta. Está funcionando pero quiero una solución diferente
He explicado lo que hice,
4 roles definidos
SuperAdmin, Admin, AdminUser, Usuario
He creado 4 archivos de componentes. siga este archivo de código component.ts
export class DashboardComponent implements OnInit { userRole: string; constructor(private authService: AuthService) { this.userRole = this.authService.userRole(); }archivo HTML:
<div [ngSwitch]="userRole"> <app-header-component title="Dashboard" *ngSwitchCase="'SuperAdmin'"> </app-header-component> <app-system-integrator-dashboard *ngSwitchCase="'Admin'"> </app-system-integrator-dashboard> <app-organization-admin-dashboard *ngSwitchCase="'AdminUser'"> </app-organization-admin-dashboard> <app-organization-user-dashboard *ngSwitchCase="'User'"> </app-organization-user-dashboard> </div>crear directiva como
/* Usage : *roleIsOneOf="[userType.ADMIN, userType.ANALYST, userType.SUPER_ANALYST]" */ @Directive({ selector: '[roleIsOneOf]', }) export class RoleIsOneOfDirective { constructor(private authService: AuthService, private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { } @Input() set roleIsOneOf(allowedRoles: Role[]) { const userRole: Role = this.authService.userRole(); if (allowedRoles.includes(userRole)) { this.viewContainer.createEmbeddedView(this.templateRef); } else { this.viewContainer.clear(); } } }