Controllo accesso basato sui ruoli in Angular2?

Question

Capisco il funzionamento dell'autenticazione basata su JWT, ma sto cercando di capire l'approccio corretto per creare un controllo di accesso basato sui ruoli in angular2.

Può qualcuno fornire un modo per affrontare questo problema o alcuni collegamenti utili.

Answer 1

seguito collegamento potrebbe aiutare:

1. Medium Article on Authentication in Angular2 App

2. Steteless Authentication in Angular2 App

Answer 2

Nell'applicazione angolare si possono fare queste cose: 1 - Assicurarsi che AuthGuard restituisce false se l'utente non è autorizzato ad accedere a determinati componenti. 2 - Nasconde le voci di menu che l'utente non dovrebbe vedere.

Ricordare che l'autorizzazione reale applicata sul server termina, in angular2 si tratta solo di livello di presentazione.

Ecco l'un possibile approccio:

1. Si aggiunge un'attestazione personalizzata a un token JWT. Può essere qualcosa di simile:

   { "utente": "JohnDoe", "ruoli": [ "admin", "manager", "qualunque"] }

2. Nell'applicazione angolare , crei AuthService, in cui decodificare il token JWT e archiviare il reclamo estratto nella variabile e nel localStorage

3. È possibile creare un navigationService che memorizzerà i dati sul menu e sui ruoli richiesti per accedere a un particolare componente nell'oggetto o array. Può essere qualcosa di simile (pseudocodice):

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. Nella componente menu è possibile utilizzare il servizio di navigazione per retrive l'elenco dei permessi voci del menu.

5. È possibile utilizzare lo stesso navigationService in AuthGuard.

Answer 3

È possibile utilizzare il modulo Ng2Permission per ruolo e controllo di accesso basato il permesso per le applicazioni angolari 2.0.

Answer 4

C'è anche la libreria ngx-permissions la differenza chiave di questa libreria che rimuoverà l'oggetto da DOM invece di nasconderlo tramite css. includerlo nel progetto

@NgModule({ 

imports: [ 
    NgxPermissionsModule.forRoot() 
], 

}) 
export class AppModule { } 

definire il ruolo

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

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

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

Usa nel modello

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

Per la documentazione vedere meglio wiki