@lark-apaas/auth-sdk 0.1.0-alpha.6 → 0.1.0-alpha.7
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 +24 -9
- package/lib/index.d.ts +2 -3
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +2 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
# @lark-apaas/auth-sdk
|
|
2
2
|
|
|
3
3
|
基于 CASL 的前端鉴权 SDK,封装了权限数据获取、Ability 初始化与 React 集成,帮助你在应用中便捷地做「功能级/按钮级/菜单级/页面级」的权限控制。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## 安装
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm i @lark-apaas/auth-sdk
|
|
@@ -10,7 +10,7 @@ npm i @lark-apaas/auth-sdk
|
|
|
10
10
|
yarn add @lark-apaas/auth-sdk
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
## 快速开始
|
|
14
14
|
|
|
15
15
|
```tsx
|
|
16
16
|
import React from 'react';
|
|
@@ -50,13 +50,14 @@ function Home() {
|
|
|
50
50
|
## 核心 API
|
|
51
51
|
|
|
52
52
|
### AuthProvider
|
|
53
|
+
|
|
53
54
|
- **作用**: 提供 `Ability` 与权限状态上下文,自动/手动拉取权限。
|
|
54
55
|
- **Props**:
|
|
55
56
|
- `config?: AuthSdkConfig`
|
|
57
|
+
- `enable?: boolean` 是否启用权限 SDK,默认 false
|
|
56
58
|
- `permissionApi?: PermissionApiConfig` 拉取权限接口配置
|
|
57
59
|
- `timeout?: number`,默认 5000ms
|
|
58
60
|
- `headers?: Record<string,string>` 自定义请求头
|
|
59
|
-
- `enable?: boolean` 是否启用权限 SDK,默认 false
|
|
60
61
|
- `onError?: (error: Error) => void`
|
|
61
62
|
- `onSuccess?: (data: PermissionApiResponse) => void`
|
|
62
63
|
- `children: React.ReactNode`
|
|
@@ -72,6 +73,7 @@ function Home() {
|
|
|
72
73
|
```
|
|
73
74
|
|
|
74
75
|
### useAuth
|
|
76
|
+
|
|
75
77
|
- **作用**: 访问权限状态与方法。
|
|
76
78
|
- **返回**:
|
|
77
79
|
- `ability: Ability` CASL `Ability` 实例
|
|
@@ -84,6 +86,7 @@ const { ability, isLoading, error, fetchPermissions } = useAuth();
|
|
|
84
86
|
```
|
|
85
87
|
|
|
86
88
|
### useAuthAbility
|
|
89
|
+
|
|
87
90
|
- **作用**: 获取 CASL `Ability` 实例,使用 `ability.can(action, subject)` 做任意判断。
|
|
88
91
|
|
|
89
92
|
```tsx
|
|
@@ -91,8 +94,9 @@ const ability = useAuthAbility();
|
|
|
91
94
|
const canCreate = ability.can('Editor', '@role');
|
|
92
95
|
```
|
|
93
96
|
|
|
94
|
-
### Can
|
|
95
|
-
|
|
97
|
+
### Can 组件
|
|
98
|
+
|
|
99
|
+
- **作用**: 条件渲染,只有当 `I` 对 `a` 可操作时才渲染子内容。 `a` 为资源类型,需要保证为 `@role`。
|
|
96
100
|
|
|
97
101
|
```tsx
|
|
98
102
|
<Can I="Editor" a="@role">
|
|
@@ -101,6 +105,7 @@ const canCreate = ability.can('Editor', '@role');
|
|
|
101
105
|
```
|
|
102
106
|
|
|
103
107
|
### PermissionClient
|
|
108
|
+
|
|
104
109
|
- **作用**: 独立的权限数据获取客户端,供非 React 场景(或自定义状态管理)使用。
|
|
105
110
|
- **方法**:
|
|
106
111
|
- `constructor(config?: PermissionApiConfig)`
|
|
@@ -116,6 +121,7 @@ const data = await client.fetchPermissions('user-123');
|
|
|
116
121
|
```
|
|
117
122
|
|
|
118
123
|
### 能力工厂(与 CASL 交互)
|
|
124
|
+
|
|
119
125
|
- `createAbility({ permissions?: Permission[], roles?: string[] }): Ability`
|
|
120
126
|
- `updateAbility(ability: Ability, { permissions?: Permission[], roles?: string[] }): void`
|
|
121
127
|
- `convertPermissionsToRules(permissions: Permission[], roles: string[]): CaslRule[]`
|
|
@@ -133,13 +139,19 @@ updateAbility(ability, { permissions: [{ id: 'p1', name: 'Task Read', sub: 'Task
|
|
|
133
139
|
---
|
|
134
140
|
|
|
135
141
|
## 类型与再导出
|
|
142
|
+
|
|
136
143
|
- 从本包导出的类型:`PermissionApiResponse`、`PermissionApiConfig`、`AuthSdkConfig`、`CaslRule`。
|
|
137
144
|
- 便捷再导出:`MongoAbility`, `AbilityBuilder`, `AbilityClass`(来自 `@casl/ability`)。
|
|
145
|
+
- 最终用户代码中仅需要使用到的 API 有:
|
|
146
|
+
- `useAuthAbility`: 获取 CASL `Ability` 实例,用于权限判断。
|
|
147
|
+
- `Can` 组件: 条件渲染,只有当 `I` 对 `a` 可操作时才渲染子内容。 `a` 为资源类型,需要保证为 `@role`。
|
|
148
|
+
- `ROLE_SUBJECT`: 特殊 subject `@role`,用于角色判断。
|
|
149
|
+
- `useAuth`: 获取权限接口的状态,配合 `fetchPermissions` 手动拉取权限数据。
|
|
138
150
|
|
|
139
|
-
---
|
|
140
151
|
|
|
141
152
|
## 集成建议与最佳实践
|
|
142
|
-
|
|
153
|
+
|
|
154
|
+
- **直接使用组件**:`Can` 组件是直接使用的主要入口,可以使用 `useAuthAbility` 在特殊场景下手动判断权限。
|
|
143
155
|
- **错误处理**:实现 `onError` 上报或提示;`onSuccess` 可做埋点。
|
|
144
156
|
- **渲染时机**:根据 `useAuth()` 的 `isLoading`/`error` 渲染 Loading/Error 页,避免闪烁。
|
|
145
157
|
- **与路由结合**:页面级的访问控制需要结合路由库(如 `react-router-dom`)和 `useAuthAbility` hook 来自行实现。
|
|
@@ -149,6 +161,7 @@ updateAbility(ability, { permissions: [{ id: 'p1', name: 'Task Read', sub: 'Task
|
|
|
149
161
|
## 进阶示例
|
|
150
162
|
|
|
151
163
|
### 菜单按权限过滤
|
|
164
|
+
|
|
152
165
|
```tsx
|
|
153
166
|
import { useAuthAbility } from '@lark-apaas/auth-sdk';
|
|
154
167
|
|
|
@@ -173,10 +186,12 @@ function Nav() {
|
|
|
173
186
|
---
|
|
174
187
|
|
|
175
188
|
## 常见问题(FAQ)
|
|
189
|
+
|
|
176
190
|
- **如何做角色判断?** 角色被映射为对特殊 subject `@role` 的 action。你可以使用 `ability.can('admin_role', '@role')` 来判断当前用户是否拥有 `admin_role` 角色。
|
|
177
|
-
- **如何实现路由守卫?**
|
|
191
|
+
- **如何实现路由守卫?** 您需要结合您使用的路由库(如 `react-router-dom`)和 `useAuthAbility` hook 来手动实现路由守卫。通过在路由渲染前检查权限,然后决定是否渲染组件或重定向。
|
|
178
192
|
|
|
179
193
|
---
|
|
180
194
|
|
|
181
195
|
## 许可
|
|
196
|
+
|
|
182
197
|
MIT
|
package/lib/index.d.ts
CHANGED
|
@@ -4,10 +4,9 @@
|
|
|
4
4
|
* 基于 CASL 的前端鉴权 SDK
|
|
5
5
|
* 封装了权限数据获取和 Ability 初始化逻辑
|
|
6
6
|
*/
|
|
7
|
-
export type {
|
|
8
|
-
export {
|
|
7
|
+
export type { PermissionApiResponse, PermissionApiConfig, AuthSdkConfig, } from './types';
|
|
8
|
+
export { ROLE_SUBJECT } from './ability-factory';
|
|
9
9
|
export { PermissionClient } from './permission-client';
|
|
10
10
|
export { AuthProvider, useAuth, useAuthAbility, Can, AbilityContext, } from './AuthProvider';
|
|
11
11
|
export type { AuthProviderProps } from './AuthProvider';
|
|
12
|
-
export { MongoAbility, AbilityBuilder, type AbilityClass } from '@casl/ability';
|
|
13
12
|
//# sourceMappingURL=index.d.ts.map
|
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,YAAY,EACV,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,aAAa,GACd,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,OAAO,EACL,YAAY,EACZ,OAAO,EACP,cAAc,EACd,GAAG,EACH,cAAc,GACf,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
|
package/lib/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { ROLE_SUBJECT
|
|
1
|
+
import { ROLE_SUBJECT } from "./ability-factory.js";
|
|
2
2
|
import { PermissionClient } from "./permission-client.js";
|
|
3
3
|
import { AbilityContext, AuthProvider, Can, useAuth, useAuthAbility } from "./AuthProvider.js";
|
|
4
|
-
|
|
5
|
-
export { AbilityBuilder, AbilityContext, AuthProvider, Can, MongoAbility, PermissionClient, ROLE_SUBJECT, convertPermissionsToRules, createAbility, updateAbility, useAuth, useAuthAbility };
|
|
4
|
+
export { AbilityContext, AuthProvider, Can, PermissionClient, ROLE_SUBJECT, useAuth, useAuthAbility };
|