角度5ロールベースのルートアクティブ化

Question

私はロール/認証ベースのルーティングを使用することができ、ルーティングモジュールでそれを有効または無効にすることができます。 Guardベースのオプションも非表示にします。 [AuthGuard]と[RoleGuard]は両方ともcanLoad(),canActivate()などを実装し、ルーティング時に対応するプロパティに割り当てられます。私は私がAuthGuardでcanLoad()関数は、この配列のcanLoad()に割り当てられた値を取得するためにどのように思っていたのアレイ

options: MenuItem[] = [ 
     { 
      page: "Active Devices", 
      icon: "tablet", 
      path: "device-status", 
      canLoad:[AuthGuard] 
     }, { 
      page: "Data Sync", 
      icon: "refresh", 
      path: "data-sync", 
      canLoad: [AuthGuard] 
     }, { 
      page: "Add Users", 
      icon: "user", 
      path: "add-users", 
      canLoad: [AuthGuard] 
     }, { 
      page: "Change Password", 
      icon: "key", 
      path: "change-password", 
      canLoad: [AuthGuard] 
     }] 

として作られたNAVオプションをされているリンクと同じことを行うことができれば は今、私は思っていました。

Answer 1

私は同様の問題があり、入力として役割の配列をとり、localstorageに格納されているものと一致するかどうかをチェックしてtrueまたはfalseを返すカスタムパイプを作成しました。

だからあなたのメニュー項目は、次のようになります。

{ 
    page: "Active Devices", 
    icon: "tablet", 
    path: "device-status", 
    roles: ['Role 1', 'Role 2'] 
} 

次に、あなたのテンプレートで、あなたはcheckAccessは、すべてのチェックを行い、あなたのパイプの名前です。この*ngIf="menuitem.roles | checkAccess"ような何かを行うことができます。

このアプローチの利点は、ナビゲーションアイテムとは別のものを隠す必要がある場合は、アプリケーションの任意の部分でcheckAccessパイプを再利用できることです。