高阶组件实现Button权限

Button权限的具体实现

总体实现：

本项目通过 高阶组件(HOC) withPermissons 实现按钮级别的权限控制，核心思路是：

1. 定义需要特定权限才能使用的按钮组件
2. 通过高阶组件检查用户是否拥有所需权限
3. 根据权限检查结果决定是否渲染按钮

关于权限高阶组件：

高阶组件接受一个组件返回一个组件

接收两个参数：按钮需要的权限和目前用户的权限

function withPermissons(requiredPermisson : string[] , userPermission : string[]){

返回一个高阶组件：

高阶组件接收一个组件->返回一个组件

 return function(Component : React.FC){return function(prpps : any){}}

在组件当中进行判断：只有requiredPermisson当中都有userPermission才返回组件

 const hasPermission = requiredPermisson.every((item) => userPermission.includes(item));if(!hasPermission){return null;}else {return <Component {...prpps} />}

使用高阶组件：

  const DeleteButton = withPermissons(["delete"],JSON.parse(sessionStorage.getItem("authBtn") as string))(Button);

整体代码实现：

// 我们这里面返回一个高阶组件，高阶组件接受一个组件返回一个组件
// 接收两个参数：按钮需要的权限和目前用户的权限
function withPermissons(requiredPermisson : string[] , userPermission : string[]){return function(Component : React.FC){return function(prpps : any){// 在这里面进行权限的判断// 只有reqire里面的权限user都有才返回组件const hasPermission = requiredPermisson.every((item) => userPermission.includes(item));if(!hasPermission){return null;}else {return <Component {...prpps} />}}}
}export default withPermissons;

  // 自制一个buttonconst DeleteButton = withPermissons(["delete"],JSON.parse(sessionStorage.getItem("authBtn") as string))(Button);

      <DeleteButton size="small" type="primary" danger className="mt">删除账号</DeleteButton>