UserPermission

> 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 (


新增


)
}
`

API

$3

| 参数 | 类型 | 说明 | 默认值 | 是否必须 |
| :---------------: | :---------------------------------------: | :----------------------------------------------------------: | :------: | -------- |
| permissions | Record | 从用户中台获取的权限信息 | - | 是 |
| defaultBehavior | AuthorizeBehavior | 无权限时的全局默认行为，disabled：禁止点击，hidden: 隐藏 | hidden | 否 |
| debug | boolean | 是否开启调试模式，调试模式下，权限将不会生效 | false | 否 |

$3

| 参数 | 类型 | 说明 | 默认值 | 是否必须 |
| :-----------: | :---------------------------------------: | :----------------------------------------------------------------: | :-------: | -------- |
| id | string | 权限 id | - | 是 |
| name | string | 权限名称，用于中台存储 | - | 是 |
| type | PermissionType | 权限类型，用于中台存储。 | OPERATE | 否 |
| parent | string | 父权限，用于中台存储 | - | 否 |
| value | string | 权限值，用于中台存储 | - | 否 |
| description | string | 权限描述，用于中台存储 | - | 否 |
| behavior | AuthorizeBehavior | 无权限时行为，disabled：禁止点击，hidden: 隐藏，默认为全局配置 | hidden | 否 |

$3

权限定义工具函数，参数参考 UserPermissionAuthorize

`ts
const addBtnPermission = definePermission({
id: 'add-permission',
name: '新增功能权限',
});
`

$3

权限定义工具函数

`ts
const permissions = definePermissions({
addBtn: {
id: 'add-permission',
name: '新增功能权限',
},
});

console.log(permissions.addBtn);
`

$3

权限类型，默认为操作权限

- MENU: 菜单权限
- OPERATE: 操作权限

$3

无权限表现行为

- disabled: 禁止操作。UserPermissionAuthorize 将会向子组件注入 disabled 属性
- hidden: 隐藏。UserPermissionAuthorize` 将会渲染空组件