Angular2中基於角色的訪問控制？

Question

我瞭解基於JWT的身份驗證的工作原理，但我正在努力瞭解在angular2中創建基於角色的訪問控制的正確方法。

有人可以提供一種方法來解決這個問題，或一些有用的鏈接。

Answer 1

以下鏈接可以幫助：

1. Medium Article on Authentication in Angular2 App

2. Steteless Authentication in Angular2 App

Answer 2

在角應用程序，你可以做這些事情： 1 - 確保AuthGuard返回如果假用戶無權訪問特定組件。 2 - 隱藏用戶不應該看到的菜單項。

請記住，真正的授權在服務器端強制執行，在angular2中，您只是處理表示層。

這裏是一個可能的方法：

1. 您添加自定義要求的JWT令牌。它可以是這樣的：

   { 「用戶」： 「JOHNDOE」， 「角色」： 「管理」， 「經理」， 「無所謂」] }

2. 在角應用創建AuthService，在此處解碼JWT令牌並將提取的聲明存儲在變量中，並存儲在本地存儲器中您可以創建一個navigationService，它將存儲有關訪問對象中特定組件所需的菜單和角色的數據或數組。它可以是類似的東西（僞代碼）：

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

允許

在菜單組件可以使用導航服務以檢索列表中菜單項。

您可以在AuthGuard中使用相同的navigationService。

Answer 3

可以使用Ng2Permission模塊，角色和權限的訪問控制你的角度2.0應用程序。

Answer 4

也有ngx-permissions庫這個庫的關鍵區別，它將從DOM中刪除對象，而不是通過css隱藏它。 它包含在項目

@NgModule({ 

imports: [ 
    NgxPermissionsModule.forRoot() 
], 

}) 
export class AppModule { } 

定義角色

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

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

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

使用模板

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

爲了更好的文檔看wiki