Contrôle d'accès basé sur les rôles dans Angular2?

Dans l'angle de l'application, vous pouvez faire ces choses:

1. Assurez-vous que AuthGuard renvoie false si l'utilisateur n'est pas autorisé
   pour accéder composant particulier.
2. Masquer les éléments de menu que l'utilisateur est
   pas censé le voir.

Rappelez-vous que réel d'autorisation appliquée sur la fin du serveur, dans le angular2 vous êtes juste faire face avec la couche de présentation.

Ici est une approche possible:

1. Vous ajoutez revendication personnalisée à un JWT jeton. Il peut être quelque chose comme ceci:

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

2. Dans l'angle de l'application, vous créez AuthService, où vous décoder le JWT jeton et de stocker des extraits de réclamation dans la variable, et dans le localStorage

3. Vous pouvez créer un navigationService qui permet de stocker les données sur le menu et les rôles requis pour accéder à certains des composants de l'objet ou de tableau. Il peut être quelque chose comme ça (en pseudo-code):

   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. Dans le menu composant, vous pouvez utiliser le service de navigation de retrive la liste des admis des éléments de menu.

5. Vous pouvez utiliser les mêmes navigationService dans le AuthGuard.

Il est également ngx-autorisations de la bibliothèque de la différence essentielle de cette bibliothèque qu'il va supprimer un objet du DOM au lieu de la masquer par css.
L'inclure dans le projet

@NgModule({

 imports: [
   NgxPermissionsModule.forRoot()
 ],

 })
 export class AppModule { }

Définir le rôle

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

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

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

Utilisation dans le modèle de

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

Pour mieux voir la documentation wiki