角度2でACL /ロールベース認証を実装する方法は？

Question

角度2のACL /紙ベースを実装する最良の方法は何ですか？

私のシナリオは、簡単に言えば、次のとおりです。ロールは動的で、クライアントが構成できるアクセス許可に基づいており、動的でも可能です。

私は、ユーザーが許可されていない特定のリソースにアクセスできないようにする必要があります。このために、私はAngards of Guardsのコンセプトを使用することを考えました。 CanActivate Guardを使用して、私は各ルートに入れる情報に基づいて、ユーザーの通過を許可するかどうかを設定できます。この情報は、そのルートが参照するリソースの名前になります。私が警備員になったとき、私は自分の役割と比較して、彼の役割がこの機能にアクセスできるかどうか、そしてナビゲーションを許可するかどうかを調べることができました。 - 彼はへのアクセス権を持っているリソースにユーザーをリダイレクトする方法

1：

しかし、その中には、さらに2つの問題に陥るだろうか？私はルートファイルをリストし、自分の役割に適合している人を探してそこにリダイレクトする必要がありますか？

2 - アクセス可能なページに表示されないコンポーネントを無効にするにはどうすればよいですか？たとえば、リスティングページXにアクセスできますが、新しいアイテムを作成するためのアクセス権がないため、[何かを作成]ボタンを削除する必要があります。または、むしろ、いくつかのロールに対して特定の情報を含んでいるがdiv要素の役割ではないdiv要素でこれを行う方法はありますか？

角度エコシステム内でこのシナリオにどのように最善のアプローチをとるべきかを知りたいと思います。

お寄せいただきありがとうございます。

Answer 1

これにはngx-permissionsライブラリを使用できます。 これは、構文、遅延読み込み、独立した遅延読み込みをサポートしています。は、ライブラリをプロジェクトに追加します。

@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> 

は、詳細ドキュメントのチェックアウト0のためのあなたのガード

const appRoutes: Routes = [ 
{ path: 'home', 
component: HomeComponent, 
canActivate: [NgxPermissionsGuard], 
data: { 
    permissions: { 
    only: ['ADMIN', 'MODERATOR'], 
    except: ['GUEST'] 
    } 
    } 
}, 
]; 

を保護します。

Answer 2

チェックCASL、統合に関する記事がVueとAureliaではなく、角度のためにそこにいる2+実装が

非常に似ている必要がありますが、ユーザー

import { AbilityBuilder } from 'casl' 


// allow to read and create Todo-s for everybody and update for assignees 
export default AbilityBuilder.define(can => { 
    can(['read','create'], 'Todo') 
    can(['update'], 'Todo', { assignee: user.id }) 
}) 

あたりの能力を定義することができます主なアイデアもあります方法についてのドキュメント内の記事map abilities to different roles