クライアントサイドパーミッションをAngular 2に適用する

Question

私は、クライアント側のパーミッションを適用する必要がある簡単なAngular 2アプリを作成しています（もちろん、パーミッションもサーバー側に適用されていますが、ユーザーは見てはいけません。）

Angularが提供しているすべてのことにはまだ慣れていません。 私はこのような機能を実現するにはどのような方法が受け入れられるのが大好きです。

か、可能ならば、私は以下の撮影したアプローチについていくつかのコメント受けてみたい：

ユーザーがログインすると、彼は例えば、彼が持っている権限のリストを受け取ります

を

• READ_POSTS
• EDIT_POSTS
• READ_USERS
• EDIT_USERS

たとえば、ユーザーがアプリの周囲にある編集ボタンを表示するかどうかを判断します。

は、それから私は、ユーザが持っている権限のリストを保持しているUserServiceに対する権限を持っているかどうかを確認するディレクティブ（*ngIfの基本的レプリカ）を作成しました。

これはディレクティブが何をするか、基本的である：

if (hasPermissions) { 
    this.viewContainer.createEmbeddedView(this.templateRef); 
} 
else { 
    this.viewContainer.clear(); 
} 

そして、以下のように使われています：このアプローチの

<div id="someContainer"> 
    <a *myPermissionDirective="'EDIT_POSTS'">Edit Post</a> 
</div> 

私の主な問題は、含まれている一般的なコンポーネントと醜いやっているということですいくつかの要素は表示する必要がありますし、いくつかのはしないでください。

たとえば、あなたが持っている権限に応じて、我々は、 を一覧を表示するのに使用listComponentと呼ばれるコンポーネントを想像し、私たちはそれらを編集する機能を持つユーザーのリストを表示するためにそれを使用したい：（現在、あなたを他の管理ユーザーを編集することはできません）

• ユーザー1編集 - >
• 管理1 [編集を表示するべきではありません]
• ユーザー2編集 - >
• ユーザー3編集 - >

非ジェネリックリストコンポーネントで

、たとえばUserListComponentのために多分私達は、ユーザーに特定の権限を参照することができるが、我々は一般的なものを使用していることから、どのように我々は関連性があるこれらのどの知っているだろう？： EDIT_POSTS、EDIT_USERS、EDIT_ADMIN_USERS 、EDIT_ARTICLE、EDIT_SYSTEM_SETTINGSなど '

ありがとうございます。

Answer 1

角度2でガードと呼ばれる概念があります。 「ガードをアクティブにできますか？

Angular 2 roles and permissions

Answer 2

のためには、あなたがng2-permissionモジュールを使用することができ、あなたのangular2アプリケーションの権限およびアクセス制御を管理します。

app.module.ts

import { Ng2Permission } from 'angular2-permission'; 

@NgModule({ 
    imports: [ 
    Ng2Permission 
    ] 
}) 

login.component.ts

import { PermissionService } from 'angular2-permission'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 
export class LoginComponent implements OnInit { 
    //... 

    constructor(private _permissionService: PermissionService) { } 

    login() { 
     this._permissionService.clearStore(); 
     this._permissionService.define(['READ_POSTS', 'EDIT_POSTS', 'READ_USERS', 'EDIT_USERS']); 
    } 
} 

* .htmlを

<div id="someContainer"> 
    <a [hasPermission]="['EDIT_POSTS']">Edit Post</a> 
</div> 

Edit PostリンクをEDIT_POSTSがすでに定義されている場合、表示されたか、で追加されます許可ストア。

Ng2PermissionモジュールのPermissionGuardを使用してルートを保護することもできます。

Answer 3

角度1の場合と同じアプローチを使用するngx-permissionsライブラリを使用することもできますが、DOMからオブジェクトを削除してCSSで非表示にする唯一の方法です。