Role Based Access Control in Angular2?

In das Eckige-Anwendung, die Sie diese Dinge tun zu können:

1. Stellen Sie sicher, dass AuthGuard gibt false zurück, wenn der Benutzer nicht autorisiert ist
   Zugriff auf bestimmte Komponenten.
2. Ausblenden der Menüpunkte Benutzer
   nicht sehen soll.

Denken Sie daran, dass echte Berechtigung durchgesetzt auf dem server, in der angular2 Sie sind nur den Umgang mit Präsentations-Schicht.

Hier ist ein möglicher Ansatz:

1. Fügen Sie benutzerdefinierte Anspruch auf ein JWT token. Es kann so etwas wie dieses:

   {
     "user" : "JohnDoe",
     "roles" : ["admin","manager","whatever"]
   }

2. In das eckige-app, die Sie erstellen, AuthService, wo Sie entschlüsseln die JWT token und speichern extrahiert Anspruch, der in der Variablen, und in der localStorage -

3. Können Sie erstellen, navigationService, die speichern die Daten über das Menü und Rollen erforderlich, um Zugang zu bestimmten Komponente in das Objekt oder array. Kann es sein, dass so etwas wie (pseudocode):

   const menuItems = [
       {
           "name":"Dashboard",
           "routerLink":"/dashboard",
           "rolesRequired":["user"]
       },
       {
           "name":"ControlPanel",
           "routerLink":"/cp",
           "rolesRequired":["admin"]
       },
       .....  
   ]
   
   constructor(private authService:AuthService){}
   
   getMenu(){
       return this.menuItems.filter(
           element => {
             return 
             this.authService.user.role.haveElement(element.rolesRequired)
          }
       )
   }

4. In der menu-Komponente können Sie die navigation service ermittelt werden, die Liste der erlaubten Menüpunkte.

5. Können Sie gleich navigationService in der AuthGuard.

InformationsquelleAutor RB_

Gibt es auch ngx-Berechtigungen Bibliothek der wesentliche Unterschied dieser Bibliothek, dass es Objekt entfernen aus DOM statt es ausblenden über css.
Über die Aufnahme in das Projekt

@NgModule({

 imports: [
   NgxPermissionsModule.forRoot()
 ],

 })
 export class AppModule { }

Definieren Rolle

NgxRolesService
 .addRole('ROLE_NAME', ['permissionNameA', 'permissionNameB'])

 NgxRolesService.addRole('Guest', () => {
     return this.sessionService.checkSession().toPromise();
  }); 

  NgxRolesService.addRole('Guest', () => {
      return true;
  }); 

Verwendung in Vorlage

<div *ngxPermissionsOnly="['ADMIN', 'GUEST']">
  <div>You can see this text congrats</div>
</div>

Zur besseren Dokumentation finden Sie unter wiki

InformationsquelleAutor alexKhymenko