refactor(*): refactor CanActivate to CanActivateFn

- refactor `ACLGuard` to `aclCanMatch`, `aclCanActivate`, `aclCanActivateChild`
ng-alain · Jul 21, 2023 · 3494c9a · 3494c9a
1 parent b565ddf
commit 3494c9a
Show file tree

Hide file tree

Showing 7 changed files with 212 additions and 227 deletions.
diff --git a/docs/how-to-start.zh-CN.md b/docs/how-to-start.zh-CN.md
@@ -159,13 +159,13 @@ const routes: Routes = [
 
 #### 用户授权
 
-接者用户访问的页面还需要取决于授权程度，例如系统配置页普通用户肯定无法进入。在初始化项目数据小节里会根据当前用户的 Token 来获得授权的数据，并将数据交给 `@delon/acl`，同时它也提供一组路由守卫的具体实现 `ACLGuard` 类，例如希望整个系统配置模块都必须是 `admin` 角色才能访问，则：
+接者用户访问的页面还需要取决于授权程度，例如系统配置页普通用户肯定无法进入。在初始化项目数据小节里会根据当前用户的 Token 来获得授权的数据，并将数据交给 `@delon/acl`，同时它也提供一组路由守卫的具体实现 `aclCanActivate` 方法，例如希望整个系统配置模块都必须是 `admin` 角色才能访问，则：
 
 ```ts
 const routes: Routes = [
   {
     path: 'sys',
-    canActivate: [ACLGuard],
+    canActivate: [aclCanActivate],
     data: { guard: 'admin' },
     children: [
       { path: 'config', component: ConfigComponent },

diff --git a/packages/acl/docs/guard.en-US.md b/packages/acl/docs/guard.en-US.md
@@ -8,20 +8,20 @@ type: Documents
 
 Routing guard prevent unauthorized users visit the page.
 
-`@delon/acl` implements the generic guard class `ACLGuard`, which allows for complex operations through simple configuration in route registration, and supports the `Observable` type.
+`@delon/acl` implements the generic guard functions `aclCanMatch`, `aclCanActivate`, `aclCanActivateChild`, which allows for complex operations through simple configuration in route registration, and supports the `Observable` type.
 
 Use the fixed attribute `guard` to specify the `ACLCanType` parameter value, for example:
 
 ```ts
 const routes: Routes = [
   {
     path: 'auth',
-    canActivate: [ ACLGuard ],
+    canActivate: [ aclCanActivate ],
     data: { guard: 'user1' as ACLGuardType }
   },
   {
     path: 'auth',
-    canActivate: [ ACLGuard ],
+    canActivate: [ aclCanActivate ],
     data: {
       guard: {
         role: [ 'user1' ],
@@ -33,7 +33,7 @@ const routes: Routes = [
   },
   {
     path: 'obs',
-    canActivate: [ ACLGuard ],
+    canActivate: [ aclCanActivate ],
     data: {
       guard: ((_srv, _injector) => {
         return of('user');
@@ -50,19 +50,19 @@ const routes: Routes = [
 
 ```ts
 import { of } from 'rxjs';
-import { ACLGuard } from '@delon/acl';
+import { aclCanActivate, aclCanActivateChild, aclCanMatch } from '@delon/acl';
 const routes: Routes = [
   {
     path: 'guard',
     component: GuardComponent,
     children: [
-      { path: 'auth', component: GuardAuthComponent, canActivate: [ ACLGuard ], data: { guard: 'user1' } },
-      { path: 'admin', component: GuardAdminComponent, canActivate: [ ACLGuard ], data: { guard: 'admin' } }
+      { path: 'auth', component: GuardAuthComponent, canActivate: [ aclCanActivate ], data: { guard: 'user1' } },
+      { path: 'admin', component: GuardAdminComponent, canActivate: [ aclCanActivate ], data: { guard: 'admin' } }
     ],
-    canActivateChild: [ ACLGuard ],
+    canActivateChild: [ aclCanActivateChild ],
     data: { guard: <ACLType>{ role: [ 'user1' ], ability: [ 10, 'USER-EDIT' ], mode: 'allOf' } }
   },
-  { path: 'pro', loadChildren: './pro/pro.module#ProModule', canMatch: [ ACLGuard ], data: { guard: 1 } },
-  { path: 'pro', loadChildren: './pro/pro.module#ProModule', canMatch: [ ACLGuard ], data: { guard: of(false).pipe(map(v => 'admin')) } }
+  { path: 'pro', loadChildren: './pro/pro.module#ProModule', canMatch: [ aclCanMatch ], data: { guard: 1 } },
+  { path: 'pro', loadChildren: './pro/pro.module#ProModule', canMatch: [ aclCanMatch ], data: { guard: of(false).pipe(map(v => 'admin')) } }
 ];
 ```
diff --git a/packages/acl/docs/guard.zh-CN.md b/packages/acl/docs/guard.zh-CN.md
@@ -8,20 +8,20 @@ type: Documents
 
 路由守卫可以防止未授权用户访问页面。
 
-路由守卫需要单独对每一个路由进行设置，很多时候这看起来很繁琐，`@delon/acl` 实现了通用守卫类 `ACLGuard`，可以在路由注册时透过简单的配置完成一些复杂的操作，甚至支持 `Observable` 类型。
+路由守卫需要单独对每一个路由进行设置，很多时候这看起来很繁琐，`@delon/acl` 实现了通用守卫函数 `aclCanMatch`, `aclCanActivate`, `aclCanActivateChild`，可以在路由注册时透过简单的配置完成一些复杂的操作，甚至支持 `Observable` 类型。
 
 使用固定属性 `guard` 来指定 `ACLCanType` 参数，例如：
 
 ```ts
 const routes: Routes = [
   {
     path: 'auth',
-    canActivate: [ ACLGuard ],
+    canActivate: [ aclCanActivate ],
     data: { guard: 'user1' as ACLGuardType }
   },
   {
     path: 'auth',
-    canActivate: [ ACLGuard ],
+    canActivate: [ aclCanActivate ],
     data: {
       guard: {
         role: [ 'user1' ],
@@ -33,7 +33,7 @@ const routes: Routes = [
   },
   {
     path: 'obs',
-    canActivate: [ ACLGuard ],
+    canActivate: [ aclCanActivate ],
     data: {
       guard: ((_srv, _injector) => {
         return of('user');
@@ -50,23 +50,19 @@ const routes: Routes = [
 
 ```ts
 import { of } from 'rxjs';
-import { ACLGuard } from '@delon/acl';
+import { aclCanActivate, aclCanActivateChild, aclCanMatch } from '@delon/acl';
 const routes: Routes = [
   {
     path: 'guard',
     component: GuardComponent,
     children: [
-      // 角色限定
-      { path: 'auth', component: GuardAuthComponent, canActivate: [ ACLGuard ], data: { guard: 'user1' } },
-      { path: 'admin', component: GuardAdminComponent, canActivate: [ ACLGuard ], data: { guard: 'admin' } }
+      { path: 'auth', component: GuardAuthComponent, canActivate: [ aclCanActivate ], data: { guard: 'user1' } },
+      { path: 'admin', component: GuardAdminComponent, canActivate: [ aclCanActivate ], data: { guard: 'admin' } }
     ],
-    // 所有子路由有效
-    canActivateChild: [ ACLGuard ],
+    canActivateChild: [ aclCanActivateChild ],
     data: { guard: <ACLType>{ role: [ 'user1' ], ability: [ 10, 'USER-EDIT' ], mode: 'allOf' } }
   },
-  // 权限点限定
-  { path: 'pro', loadChildren: './pro/pro.module#ProModule', canMatch: [ ACLGuard ], data: { guard: 1 } },
-  // 或使用Observable实现更复杂的行为
-  { path: 'pro', loadChildren: './pro/pro.module#ProModule', canMatch: [ ACLGuard ], data: { guard: of(false).pipe(map(v => 'admin')) } }
+  { path: 'pro', loadChildren: './pro/pro.module#ProModule', canMatch: [ aclCanMatch ], data: { guard: 1 } },
+  { path: 'pro', loadChildren: './pro/pro.module#ProModule', canMatch: [ aclCanMatch ], data: { guard: of(false).pipe(map(v => 'admin')) } }
 ];
 ```