@lark-apaas/auth-sdk 0.1.0-alpha.74 → 0.1.0-alpha.76

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.
Files changed (5) hide show
  1. package/README.md +1 -1
  2. package/lib/AuthProvider.d.ts +19 -29
  3. package/lib/AuthProvider.d.ts.map +1 -1
  4. package/lib/AuthProvider.js +24 -11
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -16,7 +16,7 @@ yarn add @lark-apaas/auth-sdk
16
16
 
17
17
  ```tsx
18
18
  import React from 'react';
19
- import { AuthProvider, CanRole, useAuthAbility } from '@lark-apaas/auth-sdk';
19
+ import { AuthProvider, CanRole, useAuth } from '@lark-apaas/auth-sdk';
20
20
 
21
21
  export default function App() {
22
22
  return (
package/lib/AuthProvider.d.ts CHANGED
@@ -58,11 +58,10 @@ export declare function getAbility(permissionApiConfig: AuthSdkConfig['permissio
58
58
  *
59
59
  * @example
60
60
  * ```tsx
61
- * import { useAuth, useAbility } from '@lark-apaas/auth-sdk';
61
+ * import { useAuth } from '@lark-apaas/auth-sdk';
62
62
  *
63
63
  * function MyComponent() {
64
- * const { permissions, isLoading } = useAuth();
65
- * const ability = useAbility();
64
+ * const { ability, isLoading } = useAuth();
66
65
  *
67
66
  * if (isLoading) return <div>Loading...</div>;
68
67
  *
@@ -76,46 +75,36 @@ export declare function getAbility(permissionApiConfig: AuthSdkConfig['permissio
76
75
  */
77
76
  export declare function useAuth(): AuthStateContextValue;
78
77
  /**
79
- * useAuthAbility Hook - 获取 Ability 实例
80
- *
81
- * @example
82
- * ```tsx
83
- * import { useAuthAbility } from '@lark-apaas/auth-sdk';
84
- *
85
- * function MyComponent() {
86
- * const ability = useAuthAbility();
87
- *
88
- * return (
89
- * <button disabled={ability.cannot('create', 'Task')}>
90
- * Create Task
91
- * </button>
92
- * );
93
- * }
94
- * ```
78
+ * CASL 原始 Can 组件（内部使用）
95
79
  */
96
- export declare function useAuthAbility(): MongoAbility;
80
+ declare const CaslCan: React.FunctionComponent<import("@casl/react").BoundCanProps<MongoAbility<import("@casl/ability").AbilityTuple, import("@casl/ability").MongoQuery>>>;
97
81
  /**
98
82
  * Can Component - 基于 Ability 实例的条件渲染组件
99
83
  *
84
+ * 内置 isLoading 保护：权限加载期间渲染 fallback（默认为 null），
85
+ * 避免因 ability 未就绪而误判为无权限导致内容闪烁。
86
+ *
100
87
  * @example
101
88
  * ```tsx
102
89
  * import { Can } from '@lark-apaas/auth-sdk';
103
90
  *
104
91
  * function MyComponent() {
105
92
  * return (
106
- * <Can I="Admin" a="@role">
93
+ * <Can I="Admin" a="@role" fallback={<Loading />}>
107
94
  * <TaskList />
108
95
  * </Can>
109
96
  * );
110
97
  * }
111
98
  * ```
112
99
  */
113
- export declare const Can: React.FunctionComponent<import("@casl/react").BoundCanProps<MongoAbility<import("@casl/ability").AbilityTuple, import("@casl/ability").MongoQuery>>>;
114
- export declare const useCanRole: ({ roles }: {
115
- roles: string[];
116
- }) => boolean;
100
+ export declare function Can({ fallback, ...props }: React.ComponentProps<typeof CaslCan> & {
101
+ fallback?: React.ReactNode;
102
+ }): import("react/jsx-runtime").JSX.Element;
117
103
  /**
118
- * CanRole Component - 基于 Ability 实例的角色条件渲染组件
104
+ * CanRole Component - 基于角色的条件渲染组件
105
+ *
106
+ * 支持 fallback prop，用于在权限加载期间显示自定义内容（如 Loading），
107
+ * 避免加载期间因 can() 返回 false 而误判为无权限。
119
108
  *
120
109
  * @example
121
110
  * ```tsx
@@ -123,16 +112,17 @@ export declare const useCanRole: ({ roles }: {
123
112
  *
124
113
  * function MyComponent() {
125
114
  * return (
126
- * <CanRole roles={['role_admin', 'role_editor']}>
127
- * <TaskList />
115
+ * <CanRole roles={['admin']} fallback={<Loading />}>
116
+ * <AdminPanel />
128
117
  * </CanRole>
129
118
  * );
130
119
  * }
131
120
  * ```
132
121
  */
133
- export declare function CanRole({ children, roles, }: {
122
+ export declare function CanRole({ children, roles, fallback, }: {
134
123
  children: React.ReactNode;
135
124
  roles: string[];
125
+ fallback?: React.ReactNode;
136
126
  }): import("react/jsx-runtime").JSX.Element | null;
137
127
  /**
138
128
  * useUserPermissions Hook - 获取当前用户的权限点位列表
package/lib/AuthProvider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AuthProvider.d.ts","sourceRoot":"","sources":["../src/AuthProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C;;GAEG;AACH,eAAO,MAAM,cAAc,uGAE1B,CAAC;AAOF;;;GAGG;AACH,UAAU,qBAAqB;IAC7B,OAAO,EAAE,YAAY,CAAC;IACtB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACtD;AAOD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CA4EnE;AAED;;;;;GAKG;AACH,wBAAsB,UAAU,CAC9B,mBAAmB,EAAE,aAAa,CAAC,eAAe,CAAC,2GAmBpD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,OAAO,IAAI,qBAAqB,CAQ/C;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,IAAI,YAAY,CAE7C;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,GAAG,sJAA+C,CAAC;AAEhE,eAAO,MAAM,UAAU,GAAa,WAAW;IAAE,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,KAAG,OASpE,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,kDAIA;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,MAAM,EAAE,EACrB,KAAK,GAAE,KAAK,GAAG,KAAa,GAC3B,OAAO,CAOT;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,WAAW,EACX,KAAa,EACb,QAAe,GAChB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAGA"}
1
+ {"version":3,"file":"AuthProvider.d.ts","sourceRoot":"","sources":["../src/AuthProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C;;GAEG;AACH,eAAO,MAAM,cAAc,uGAE1B,CAAC;AAOF;;;GAGG;AACH,UAAU,qBAAqB;IAC7B,OAAO,EAAE,YAAY,CAAC;IACtB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACtD;AAOD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CA+EnE;AAED;;;;;GAKG;AACH,wBAAsB,UAAU,CAC9B,mBAAmB,EAAE,aAAa,CAAC,eAAe,CAAC,2GAmBpD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,OAAO,IAAI,qBAAqB,CAQ/C;AAED;;GAEG;AACH,QAAA,MAAM,OAAO,sJAA+C,CAAC;AAE7D;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,GAAG,CAAC,EAClB,QAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAKvE;AAoBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,QAAe,GAChB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,kDAKA;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,MAAM,EAAE,EACrB,KAAK,GAAE,KAAK,GAAG,KAAa,GAC3B,OAAO,CAOT;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,WAAW,EACX,KAAa,EACb,QAAe,GAChB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAGA"}
package/lib/AuthProvider.js CHANGED
@@ -12,9 +12,9 @@ const AuthStateContext = /*#__PURE__*/ createContext(null);
12
12
  function AuthProvider({ children, config }) {
13
13
  const [ability, setAbility] = useState(()=>createAbility({}));
14
14
  const [permissions, setPermissions] = useState([]);
15
- const [isLoading, setIsLoading] = useState(false);
16
- const [error, setError] = useState(null);
17
15
  const [client] = useState(()=>config?.permissionApi ? new PermissionClient(config.permissionApi) : null);
16
+ const [isLoading, setIsLoading] = useState(()=>config?.enable !== false && null !== client);
17
+ const [error, setError] = useState(null);
18
18
  const fetchPermissions = useCallback(async ()=>{
19
19
  if (!client) return;
20
20
  setIsLoading(true);
@@ -84,19 +84,32 @@ function useAuth() {
84
84
  if (!context) throw new Error('useAuth must be used within an AuthProvider');
85
85
  return context;
86
86
  }
87
- function useAuthAbility() {
88
- return useContext(AbilityContext);
87
+ const CaslCan = createContextualCan(AbilityContext.Consumer);
88
+ function Can({ fallback = null, ...props }) {
89
+ const authState = useContext(AuthStateContext);
90
+ if (authState?.isLoading) return /*#__PURE__*/ jsx(Fragment, {
91
+ children: fallback
92
+ });
93
+ return /*#__PURE__*/ jsx(CaslCan, {
94
+ ...props
95
+ });
89
96
  }
90
- const Can = createContextualCan(AbilityContext.Consumer);
91
- const useCanRole = function({ roles }) {
97
+ function useCanRole({ roles }) {
92
98
  const ability = useContext(AbilityContext);
99
+ const authState = useContext(AuthStateContext);
93
100
  const allowed = !roles || 0 === roles.length || roles.length > 0 && roles.some((role)=>ability.can(role, ROLE_SUBJECT));
94
- return !!allowed;
95
- };
96
- function CanRole({ children, roles }) {
97
- const allowed = useCanRole({
101
+ return {
102
+ allowed: !!allowed,
103
+ isLoading: authState?.isLoading ?? false
104
+ };
105
+ }
106
+ function CanRole({ children, roles, fallback = null }) {
107
+ const { allowed, isLoading } = useCanRole({
98
108
  roles
99
109
  });
110
+ if (isLoading) return /*#__PURE__*/ jsx(Fragment, {
111
+ children: fallback
112
+ });
100
113
  return allowed ? /*#__PURE__*/ jsx(Fragment, {
101
114
  children: children
102
115
  }) : null;
@@ -118,4 +131,4 @@ function CanPermission({ children, permissions, match = 'any', fallback = null }
118
131
  children: fallback
119
132
  });
120
133
  }
121
- export { AbilityContext, AuthProvider, Can, CanPermission, CanRole, getAbility, useAuth, useAuthAbility, useCanPermission, useCanRole, useUserPermissions };
134
+ export { AbilityContext, AuthProvider, Can, CanPermission, CanRole, getAbility, useAuth, useCanPermission, useUserPermissions };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lark-apaas/auth-sdk",
3
- "version": "0.1.0-alpha.74",
3
+ "version": "0.1.0-alpha.76",
4
4
  "description": "基于 CASL 的前端鉴权 SDK",
5
5
  "types": "./lib/index.d.ts",
6
6
  "main": "./lib/index.js",