web-dev-qa-db-ja.com

angular）のユーザーロール/権限に基づいてメニューを管理する方法

新しいangularプロジェクトを開始しました。私のアプリケーションには、3種類のユーザー（管理者、顧客、会社）があります。顧客が管理者ユーザーメニューにアクセスするのを制限するにはどうすればよいですか？

angulartypescriptweb-applicationsmenuuser-permissions
5
byteC0de

ナビゲーションを特定のURL /リソースに制限するには、ActivatedRouteインターフェースを実装する必要があります 続きを読む

3
Justus Ikara

ngx-permissions ライブラリを使用できます。遅延読み込み、分離遅延読み込み、その他の構文をサポートします。ライブラリをロードする

@NgModule({

 imports: [

 NgxPermissionsModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})

ロールをロードする

this.ngxRolesService.addRole('GUEST', () => {
  return true;
});

安全なルート

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

詳細なドキュメントは [〜＃〜] wiki [〜＃〜] ページにあります

2
alexKhymenko

メニューの音声をデータベースに保存するのが好きです。これにより、より安全なサーバーコントロールが可能になり、アクションを許可/拒否するユーザーレベルの権限を処理できます。クライアント側のみに関心がある場合は、ルーティングモジュールに変数を追加するだけです。

{ path: 'profile/:user_level', component: ProfileComponent }

次に、コンポーネント内に違いを実装できます。ユーザーが自分のレベルのコンテンツのみを表示できるようにするにはどうすればよいですか？セッションユーザーが自分に合わないコンテンツを見ようとしているかどうかをチェックするコントロールを実装するだけです。 （ProfileComponent内の例）

this.user_level= + params['user_level'];
this.utilityService.checkUserLevel(this.user_level);

UtilityService：

 checkUserLevel(url_liv_serial: number) {
    let utente: Utente = JSON.parse(localStorage.getItem('currentUser'));


    if (url_liv_serial < utente.ute_liv_serial) {
        this.router.navigate(['/login']);
        let snackBarRef = this.snackBar.open('Access denied', 'Close', {
            duration: Constants.short_time_sb
        });
    }
}
1
Michele Sapignoli

次の2つのことを行う必要があります。1。これらのメニュー項目からアクセスできるようにルートを保護します。2。これらのメニュー項目にアクセスできないユーザーに対してこれらのメニュー項目をレンダリングしないでください。

権限はデータベース駆動型にすることができます。 angular 2のガードを使用してルートを保護でき、メニュー項目はng-ifディレクティブを使用してレンダリングできないように制限できます。

https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html

https://angular.io/docs/ts/latest/guide/router.html

0
Amit Goel