@lark-apaas/client-toolkit 1.1.21-alpha.auth.dev.3 → 1.1.21-alpha.auth.dev.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,24 +11,66 @@
|
|
|
11
11
|
|
|
12
12
|
* 包含与权限相关的 API 和组件
|
|
13
13
|
|
|
14
|
-
#### Can 组件
|
|
15
14
|
|
|
16
|
-
|
|
15
|
+
### 开发组件 - 使用 CanRole 组件 (推荐)
|
|
17
16
|
|
|
18
17
|
```tsx
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
import { CanRole } from '@lark-apaas/client-toolkit';
|
|
19
|
+
|
|
20
|
+
function Home() {
|
|
21
|
+
return (
|
|
22
|
+
<div>
|
|
23
|
+
<CanRole roles={['role_admin']}>
|
|
24
|
+
<div>管理员按钮</div>
|
|
25
|
+
</CanRole>
|
|
26
|
+
<CanRole roles={['role_admin', 'role_editor']}>
|
|
27
|
+
<div>编辑按钮</div>
|
|
28
|
+
</CanRole>
|
|
29
|
+
</div>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### 开发组件 - 使用 AbilityContext 处理复杂场景
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { useContext } from 'react';
|
|
38
|
+
import { AbilityContext, ROLE_SUBJECT } from '@lark-apaas/client-toolkit';
|
|
39
|
+
|
|
40
|
+
function Home() {
|
|
41
|
+
const ability = useContext(AbilityContext);
|
|
42
|
+
return (
|
|
43
|
+
<div>
|
|
44
|
+
{ability.can('role_admin', ROLE_SUBJECT) || ability.can('role_editor', ROLE_SUBJECT) ? (
|
|
45
|
+
<div>可见的仪表盘</div>
|
|
46
|
+
) : null}
|
|
47
|
+
</div>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
22
50
|
```
|
|
23
51
|
|
|
24
|
-
|
|
52
|
+
### 开发组件 - 进阶示例
|
|
25
53
|
|
|
26
|
-
|
|
54
|
+
### 菜单按权限过滤
|
|
27
55
|
|
|
28
56
|
```tsx
|
|
29
57
|
import { useContext } from 'react';
|
|
30
|
-
import { AbilityContext } from '@lark-apaas/
|
|
58
|
+
import { AbilityContext, ROLE_SUBJECT } from '@lark-apaas/client-toolkit';
|
|
59
|
+
|
|
60
|
+
const menus = [
|
|
61
|
+
{ name: 'Dashboard', path: '/dashboard', p: { action: 'role_admin', subject: ROLE_SUBJECT } },
|
|
62
|
+
{ name: 'Users', path: '/users', p: { action: 'role_editor', subject: ROLE_SUBJECT } },
|
|
63
|
+
{ name: 'Settings', path: '/settings', p: { action: 'role_admin', subject: ROLE_SUBJECT } },
|
|
64
|
+
];
|
|
31
65
|
|
|
32
|
-
|
|
33
|
-
const
|
|
66
|
+
function Nav() {
|
|
67
|
+
const ability = useContext(AbilityContext);
|
|
68
|
+
return (
|
|
69
|
+
<nav>
|
|
70
|
+
{menus.map(m => ability.can(m.p.action, m.p.subject) && (
|
|
71
|
+
<a key={m.path} href={m.path}>{m.name}</a>
|
|
72
|
+
))}
|
|
73
|
+
</nav>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
34
76
|
```
|