UserPermission

React component for wii user permission

安装

npm i @wii/user-permission

使用

• 组件
  • UserPermissionProvider
  • UserPermissionAuthorize
• Hooks
  • useUserPermissions
• 工具函数
  • definePermission
  • definePermissions
  • checkPermission

示例

import { Button } from '@wii/wau'
import { UserPermissionProvider, UserPermissionAuthorize } from '@wii/user-permission'

export default = () => {
  return (
    <UserPermissionProvider permissions={{}} defaultBehavior="hidden">
    <UserPermissionAuthorize id="add-permission" name="新增功能权限">
      <Button>新增</Button>
    </UserPermissionAuthorize>
    </UserPermissionProvider>
  )
}

或者

import { Button } from '@wii/wau'
import { UserPermissionProvider, UserPermissionAuthorize, definePermission } from '@wii/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 将会渲染空组件