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