web-dev-qa-db-fra.com

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

Je comprends le fonctionnement de l'authentification basée sur JWT, mais j'ai du mal à comprendre la bonne approche pour créer un contrôle d'accès basé sur les rôles dans angular2.

Quelqu'un peut-il s'il vous plaît fournir un moyen d'aborder ce problème, ou quelques liens utiles.

angulartypescriptsingle-sign-onaccess-control
13
ankitkamboj

Dans l'application Angular angulaire, vous pouvez faire ces choses:

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

N'oubliez pas que la véritable autorisation appliquée sur le serveur, dans l'angular2, vous avez juste affaire à la couche de présentation.

Voici la seule approche possible:

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

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

  2. Dans l'application angular, vous créez AuthService, où vous décodez le jeton JWT et stockez la revendication extraite dans la variable et dans le localStorage

  3. Vous pouvez créer un navigationService qui stockera les données sur le menu et les rôles nécessaires pour accéder à un composant particulier dans l'objet ou le tableau. Cela peut être quelque chose comme ça (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. Dans le composant de menu, vous pouvez utiliser le service de navigation pour retrouver la liste des éléments de menu autorisés.

  5. Vous pouvez utiliser le même service de navigation dans AuthGuard.

9
RB_

Il y a aussi ngx-permissions bibliothèque la principale différence de cette bibliothèque qui supprimera l'objet du DOM au lieu de le cacher via css. Incluez-le 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;
  });

Utiliser dans le modèle

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

Pour une meilleure documentation, voir wiki

5
alexKhymenko

Le lien suivant pourrait aider:

  1. Article moyen sur l'authentification dans l'application Angular2

  2. Authentification Steteless dans Angular2 App

5
Darshan Puranik

Vous pouvez utiliser le module Ng2Permission pour le contrôle d'accès basé sur les rôles et les autorisations pour vos applications angular 2.0.

3
Javad Rasouli