UserPermission
React component for user permission
安装
...
使用
- 组件
UserPermissionProvider
UserPermissionAuthorize
- Hooks
useUserPermissions
- 工具函数
definePermission
definePermissions
checkPermission
示例
import { Button } from '...'
import { UserPermissionProvider, UserPermissionAuthorize } from '@utopia/user-permission'
export default = () => {
return (
<UserPermissionProvider permissions={{}} defaultBehavior="hidden">
<UserPermissionAuthorize id="add-permission" name="新增功能权限">
<Button>新增</Button>
</UserPermissionAuthorize>
</UserPermissionProvider>
)
}
或者
import { Button } from '...'
import { UserPermissionProvider, UserPermissionAuthorize, definePermission } from '@utopia/user-permission'
const addPermission = definePermission({
id: 'add-permission',
name: '新增功能权限'
})
export default = () => {
return (
<UserPermissionProvider permissions={{}} defaultBehavior="hidden">
<UserPermissionAuthorize {...addPermission}>
<Button>新增</Button>
</UserPermissionAuthorize>
</UserPermissionProvider>
)
}
API
UserPermissionProvider
参数 | 类型 | 说明 | 默认值 | 是否必须 |
---|---|---|---|---|
permissions |
Record<string, string> |
从用户中台获取的权限信息 | - |
是 |
defaultBehavior |
AuthorizeBehavior |
无权限时的全局默认行为,disabled :禁止点击,hidden : 隐藏 |
hidden |
否 |
debug |
boolean |
是否开启调试模式,调试模式下,权限将不会生效 | false |
否 |
UserPermissionAuthorize
参数 | 类型 | 说明 | 默认值 | 是否必须 |
---|---|---|---|---|
id |
string |
权限 id
|
- |
是 |
name |
string |
权限名称,用于中台存储 | - |
是 |
type |
PermissionType |
权限类型,用于中台存储。 | OPERATE |
否 |
parent |
string |
父权限,用于中台存储 | - |
否 |
value |
string |
权限值,用于中台存储 | - |
否 |
description |
string |
权限描述,用于中台存储 | - |
否 |
behavior |
AuthorizeBehavior |
无权限时行为,disabled :禁止点击,hidden : 隐藏,默认为全局配置 |
hidden |
否 |
definePermission
权限定义工具函数,参数参考 UserPermissionAuthorize
const addBtnPermission = definePermission({
id: 'add-permission',
name: '新增功能权限',
});
definePermissions
权限定义工具函数
const permissions = definePermissions({
addBtn: {
id: 'add-permission',
name: '新增功能权限',
},
});
console.log(permissions.addBtn);
PermissionType
权限类型,默认为操作权限
-
MENU
: 菜单权限 -
OPERATE
: 操作权限
AuthorizeBehavior
无权限表现行为
-
disabled
: 禁止操作。UserPermissionAuthorize
将会向子组件注入disabled
属性 -
hidden
: 隐藏。UserPermissionAuthorize
将会渲染空组件