Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(*): refactor CanActivate to CanActivateFn #1623

Merged
merged 3 commits into from
Jul 21, 2023
Merged

refactor(*): refactor CanActivate to CanActivateFn #1623

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3494c9a
refactor(*): refactor `CanActivate` to `CanActivateFn`
cipchk Jul 21, 2023
548a061
refactor: refactor jwtguard, simpleguard
cipchk Jul 21, 2023
1fc362e
refactor: refactor AlainI18NGuard
cipchk Jul 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/how-to-start.zh-CN.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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