angular - Controlul Accesului Bazat pe Roluri în Angular2?

Înțeleg modul de funcționare al autentificării bazate pe JWT, dar mă confrunt cu dificultăți în a înțelege abordarea corectă pentru a crea un control al accesului bazat pe roluri în Angular2.

Poate cineva să ofere, vă rog, o modalitate de a aborda această problemă sau câteva linkuri utile.

Răspuns #1

În aplicația Angular poți face aceste lucruri:

Asigură-te că AuthGuard returnează fals dacă utilizatorul nu este autorizat să acceseze un anumit component.
Ascunde elementele de meniu pe care utilizatorul nu ar trebui să le vadă.

Amintește-ți că autorizarea reală este aplicată la nivel de server, în Angular2 te ocupi doar de nivelul de prezentare.

Iată o posibilă abordare:

Adaugi o revendicare personalizată într-un token JWT. Poate fi ceva de genul acesta:
```
{
  "user" : "JohnDoe",
  "roles" : ["admin","manager","whatever"]
}
```
În aplicația Angular, creezi AuthService, unde decodifici tokenul JWT și stochezi revendicarea extrasă în variabilă și în localStorage

Poți crea un navigationService care va stoca date despre meniu și rolurile necesare pentru a accesa un anumit component în obiect sau array. Poate fi ceva de genul acesta (pseudocod):

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)
       }
    )
}

În componenta de meniu poți folosi serviciul de navigare pentru a prelua lista elementelor de meniu permise.
Poți folosi același navigationService în AuthGuard.

Răspunsul #2

Există, de asemenea, biblioteca ngx-permissions, diferența cheie a acestei biblioteci fiind că va elimina obiectul din DOM în loc să-l ascundă prin CSS. Includeți-o în proiect.

@NgModule({

 imports: [
   NgxPermissionsModule.forRoot()
 ],

 })
 export class AppModule { }

Define rolul

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

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

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

Folosește în șablon

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

Pentru o documentație mai bună, vezi wiki