角度2のユーザーの役割に基づいてメニューを管理する方法

Question

新しい角度2のプロジェクトを開始しました。私のアプリケーションには、3種類のユーザー（管理者、顧客、会社）があります。顧客が管理ユーザーのメニューにアクセスするのを制限するにはどうすればよいですか？ 1.あなたのルートをセキュアに 2.これらのレンダリングを行いませんこれらのメニュー項目がアクセスする：

Answer 1

あなたはenter link description here

Answer 2

あなたは二つのことを行う必要があり、特定のURL /リソースへのナビゲーションを制限するActivatedRouteインターフェイスを実装する必要がありますこれらにアクセスすべきではないユーザのためのメニュー項目。

権限はデータベース駆動型である可能性があります。角度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

Answer 3

私は、データベース上の私のメニューの声を維持したいです。これにより、より安全なサーバーコントロールが提供され、ユーザーレベルの操作許可/拒否のアクセス許可が処理されます。 あなたは、クライアント側にのみ関心がある場合は、単にあなたのルーティングモジュールに変数を追加することができます。

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

次に、あなたのコンポーネント内部の違いを実装することができます。 ユーザーが自分のレベルのコンテンツしか見ることができないようにするにはどうすればよいですか？セッションのユーザーが自分以外のコンテンツを見ようとしているかどうかを確認するコントロールを実装するだけです。 （ProfileComponent内側例）

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

UtilityService：あなたはngx-permissionsライブラリを使用することができます

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

Answer 4

。それは遅延ロード、孤立した遅延読み込み、それ以外の構文をサポートします。 ロードライブラリ

@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ページ

に見つけることができる詳細なドキュメント