Skip to content

Commit

Permalink
refactor(*): refactor CanActivate to CanActivateFn (#1623)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cipchk
cipchk authored Jul 21, 2023
1 parent b565ddf commit 66b358f
Show file tree
Hide file tree
Showing 19 changed files with 363 additions and 382 deletions.
8 changes: 4 additions & 4 deletions docs/how-to-start.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ const routes: Routes = [
{
path: '',
component: LayoutBasicComponent,
canActivate: [SimpleGuard],
canActivate: [authSimpleCanActivate],
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent, data: { title: '仪表盘' } },
Expand All @@ -153,19 +153,19 @@ const routes: Routes = [
];
```

> 这里的 `SimpleGuard` 是因为采用基于 Simple Web Token 认证风格，其他认证方式请参考[用户认证](/auth)章节。
> 这里的 `authSimpleCanActivate` 是因为采用基于 Simple Web Token 认证风格，其他认证方式请参考[用户认证](/auth)章节。
当用户未登录时会直接跳转至 `/passport/login` 页面，如果采用的是 JWT 认证方式，还会对 Token 是否有效进行检验。

#### 用户授权

接者用户访问的页面还需要取决于授权程度，例如系统配置页普通用户肯定无法进入。在初始化项目数据小节里会根据当前用户的 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 },
Expand Down
4 changes: 2 additions & 2 deletions docs/i18n.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,14 +203,14 @@ Use the [defaultLanguage](/cli/plugin/zh#defaultLanguage) plugin to quickly swit

## Internationalized routing

If you want to toggle internationalization by routed URLs, e.g. by accessing `/zh` and `/en` to change the language, just use the `AlainI18NGuard` guard in the root route:
If you want to toggle internationalization by routed URLs, e.g. by accessing `/zh` and `/en` to change the language, just use the `alainI18nCanActivate` guard in the root route:

```ts
const routes: Route[] = [
{
path: '',
component: LayoutComponent,
canActivateChild: [AlainI18NGuard],
canActivateChild: [alainI18nCanActivate],
children: [
{ path: '', redirectTo: 'en', pathMatch: 'full' },
{ path: ':i18n', component: HomeComponent }
Expand Down
4 changes: 2 additions & 2 deletions docs/i18n.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,14 +203,14 @@ export class AppModule {}

## 国际化路由

若想通过路由的URL来切换国际化，例如：通过访问 `/zh` 和 `/en` 来变更语言，则只需要在根路由中使用 `AlainI18NGuard` 守卫：
若想通过路由的URL来切换国际化，例如：通过访问 `/zh` 和 `/en` 来变更语言，则只需要在根路由中使用 `alainI18nCanActivate` 守卫：

```ts
const routes: Route[] = [
{
path: '',
component: LayoutComponent,
canActivateChild: [AlainI18NGuard],
canActivateChild: [alainI18nCanActivate],
children: [
{ path: '', redirectTo: 'en', pathMatch: 'full' },
{ path: ':i18n', component: HomeComponent }
Expand Down
20 changes: 10 additions & 10 deletions packages/acl/docs/guard.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' ],
Expand All @@ -33,7 +33,7 @@ const routes: Routes = [
},
{
path: 'obs',
canActivate: [ ACLGuard ],
canActivate: [ aclCanActivate ],
data: {
guard: ((_srv, _injector) => {
return of('user');
Expand All @@ -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')) } }
];
```
24 changes: 10 additions & 14 deletions packages/acl/docs/guard.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' ],
Expand All @@ -33,7 +33,7 @@ const routes: Routes = [
},
{
path: 'obs',
canActivate: [ ACLGuard ],
canActivate: [ aclCanActivate ],
data: {
guard: ((_srv, _injector) => {
return of('user');
Expand All @@ -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')) } }
];
```
Loading

0 comments on commit 66b358f

Please sign in to comment.