web-dev-qa-db-ja.com

Angular2の役割ベースのアクセス制御？

JWTベースの認証の動作は理解していますが、angular2でロールベースのアクセス制御を作成するための正しいアプローチを理解するのに苦労しています。

誰かがこの問題に対処する方法、またはいくつかの便利なリンクを提供してください。

angulartypescriptsingle-sign-onaccess-control
13
ankitkamboj

Angularアプリケーションでは、次のことができます。

  1. ユーザーが特定のコンポーネントへのアクセスを許可されていない場合、AuthGuardがfalseを返すことを確認してください。
  2. ユーザーが表示するはずのないメニュー項目を非表示にします。

Angular2では、プレゼンテーションレイヤーを扱っているだけで、サーバーエンドで実際の承認が強制されることに注意してください。

考えられる1つのアプローチを次に示します。

  1. カスタムクレームをJWTトークンに追加します。次のようになります。

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

  2. angularアプリで、AuthServiceを作成します。このサービスでは、JWTトークンをデコードし、抽出したクレームを変数とlocalStorageに格納します

  3. オブジェクトまたは配列内の特定のコンポーネントにアクセスするために必要なメニューとロールに関するデータを格納する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)
       }
    )
}

  4. メニューコンポーネントでは、ナビゲーションサービスを使用して、許可されたメニュー項目のリストを取得できます。

  5. AuthGuardで同じnavigationServiceを使用できます。

9
RB_

ngx-permissions library cssを介してオブジェクトを非表示にする代わりにDOMからオブジェクトを削除するというこのライブラリの重要な違いもあります。プロジェクトに含める

@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 をご覧ください

5
alexKhymenko

次のリンクが役立つ場合があります。

  1. Angular2アプリでの認証に関する中記事

  2. Angular2アプリでの無段階認証

5
Darshan Puranik

angular 2.0アプリケーションのロールおよび権限ベースのアクセス制御には、 Ng2Permission モジュールを使用できます。

3
Javad Rasouli