각도 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] 
     }] 

로 만든 탐색 옵션을있는 링크와 동일한 기능을 수행 할 수있는 경우 지금 궁금 해서요.

Answer 1

비슷한 문제가있어서 입력 역할로 배열을 가져 와서 localstorage에 저장 한 항목과 일치하는지 확인하고 true 또는 false을 반환하는 사용자 지정 파이프를 작성했습니다.

그래서 메뉴 항목은 다음과 같이 표시됩니다 템플릿에서 다음

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

을, 당신은 checkAccess 모든 검사를 수행하여 파이프의 이름이 *ngIf="menuitem.roles | checkAccess"과 같은 작업을 수행 할 수 있습니다.

이 접근법의 장점은 네비게이션 항목과 다른 것을 숨기려면 응용 프로그램의 어느 부분에서나 checkAccess 파이프를 다시 사용할 수 있다는 것입니다.