Wie man Menü basierend auf Benutzerrollen in Winkel 2 2

Question

Ich habe ein neues eckiges 2-Projekt gestartet, in meiner Anwendung haben 3 Arten von Benutzern (admin, Kunde und Firma). Wie kann man Kunden vom Zugriff auf Admin-Benutzermenüs einschränken?

Answer 1

Sie sollten die ActivatedRoute Schnittstelle implementieren Navigation zu einer bestimmten URL/Ressource enter link description here

Answer 2

Sie sollten zwei Dinge beschränken tun: 1. Sichern Sie Ihre Routen durch diese Menüpunkte zugegriffen werden 2. Setzen Sie diese nicht machen Menüelemente für Benutzer, die keinen Zugriff darauf haben sollen.

Berechtigungen können datenbankgesteuert sein. Sie können Routen mit Wächtern in Winkel 2 schützen, und Menüelemente können beim Rendern mit der Anweisung ng-if eingeschränkt werden.

https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html

https://angular.io/docs/ts/latest/guide/router.html

Answer 3

Ich mag auf eine Datenbank mein Menü Stimmen zu halten. Dies gibt mir sicherere Serversteuerelemente, die Berechtigungen für Benutzerebenen behandeln, die Aktionen erlauben/verweigern. Wenn Sie daran interessiert sind nur in der Client-Seite sind, können Sie einfach eine Variable auf dem Routing-Modul hinzufügen:

{ path: 'profile/:user_level', component: ProfileComponent } 

Dann können Sie die Unterschiede innerhalb Ihrer Komponenten implementieren. Wie kann sichergestellt werden, dass ein Benutzer nur Inhalte für sein Level sehen kann? Implementieren Sie einfach ein Steuerelement, das überprüft, ob der Sitzungsbenutzer versucht, einen Inhalt anzuzeigen, der nicht für ihn bestimmt ist. (Beispiel innerhalb ProfileComponent)

this.user_level= + params['user_level']; 
this.utilityService.checkUserLevel(this.user_level); 

UtilityService:

checkUserLevel(url_liv_serial: number) { 
    let utente: Utente = JSON.parse(localStorage.getItem('currentUser')); 


    if (url_liv_serial < utente.ute_liv_serial) { 
     this.router.navigate(['/login']); 
     let snackBarRef = this.snackBar.open('Access denied', 'Close', { 
      duration: Constants.short_time_sb 
     }); 
    } 
} 

Answer 4

können Sie ngx-permissions Bibliothek verwenden. Es unterstützt Lazy Loading, isoliert Lazy Loading, dann sonst Syntax. Ladebibliothek

@NgModule({ 

imports: [ 

NgxPermissionsModule.forRoot() 
], 
providers: [], 
bootstrap: [AppComponent] 
}) 

Lastrollen

this.ngxRolesService.addRole('GUEST',() => { 
    return true; 
}); 

Sichere Wurzel

const appRoutes: Routes = [ 
{ path: 'home', 
    component: HomeComponent, 
    canActivate: [NgxPermissionsGuard], 
    data: { 
     permissions: { 
     only: 'GUEST' 
     } 
    } 
    }, 
]; 

Eine detaillierte Dokumentation finden Sie auf WIKI Seite finden