路由守卫

写在前面

路由守卫可以防止未授权用户访问页面。

路由守卫需要单独对每一个路由进行设置，很多时候这看起来很繁琐，@delon/acl 实现了通用守卫类 ACLGuard，可以在路由注册时透过简单的配置完成一些复杂的操作，甚至支持 Observable 类型。

使用固定属性 guard 来指定 ACLCanType 参数，例如：

  1. const routes: Routes = [
  2.   {
  3.     path: 'auth',
  4.     canActivate: [ ACLGuard ],
  5.     data: { guard: 'user1' }
  6.   },
  7.   {
  8.     path: 'auth',
  9.     canActivate: [ ACLGuard ],
  10.     data: {
  11.       guard: {
  12.         role: [ 'user1' ],
  13.         ability: [ 10, 'USER-EDIT' ],
  14.         mode: 'allOf'
  15.       },
  16.       guard_url: '/no-permisseion'
  17.     }
  18.   },
  19. ]

guard 的值必须符合 ACLCanType 类型值。

示例

  1. import { of } from 'rxjs';
  2. import { ACLGuard } from '@delon/acl';
  3. const routes: Routes = [
  4.   {
  5.     path: 'guard',
  6.     component: GuardComponent,
  7.     children: [
  8.       // 角色限定
  9.       { path: 'auth', component: GuardAuthComponent, canActivate: [ ACLGuard ], data: { guard: 'user1' } },
  10.       { path: 'admin', component: GuardAdminComponent, canActivate: [ ACLGuard ], data: { guard: 'admin' } }
  11.     ],
  12.     // 所有子路由有效
  13.     canActivateChild: [ ACLGuard ],
  14.     data: { guard: { role: [ 'user1' ], ability: [ 10, 'USER-EDIT' ], mode: 'allOf' } }
  15.   },
  16.   // 权限点限定
  17.   { path: 'pro', loadChildren: './pro/pro.module#ProModule', canLoad: [ ACLGuard ], data: { guard: 1 } },
  18.   // 或使用Observable实现更复杂的行为
  19.   { path: 'pro', loadChildren: './pro/pro.module#ProModule', canLoad: [ ACLGuard ], data: { guard: of(false).pipe(map(v => 'admin')) } }
  20. ];