react-antd-按钮级权限

import React from 'react'

// 确定 按钮的状态
export const showOrDisable = {
  showOrHide: "showOrHide",
  disableOrOpen: "disableOrOpen"
}

// 后台给的权限
export const permissionsType = {
  add_shop: "add_shop",
  add_account: "add_account",
  del_account: "del_account",
}

/*
*  auth: 插槽传递过来，需要验证的权限 
*  children：要处理权限jsx结构，
*  type: 处理权限的方式
*  rest：其余参数的传递（比如还有其他的父元素要传递参数给按钮）
*/

export default function AuthComponent({
  auth,
  children,
  type = permissionsType.disableOrOpen,
  ...rest
}) {
  const permissions = JSON.parse(localStorage.permissions);

  // 如果没有权限 需要隐藏 permissions.includes(auth) 为 false 
  if (type === showOrDisable.showOrHide) {
    return permissions.includes(auth) ? children : null
    // 没有权限的 禁用
  } else if (type === showOrDisable.disableOrOpen) {
    // 克隆节点
    return React.cloneElement(children, {
    // 第二个参数 可以添加属性
      disabled: !permissions.includes(auth),
      title: !permissions.includes(auth) ? '对不起，不准用~' : null,
     // 其余参数，不传的话 按钮可能会丢失某些功能或参数 
      ...rest
    })
  }
}

示例：（antd-table-columns-render）

   {
     title: '操作',
     dataIndex: 'tags',
     render: (item, record) => (
       <Popconfirm
         title="确定删除吗?"
         onConfirm={() => del(record._id)}
         onCancel={cancel}
         okText="是"
         cancelText="否"
       >
         <AuthComponent
           type={showOrDisable.disableOrOpen}
           auth={permissionsType.del_account}
         >
           <Button
             type='danger'
             size='small'
           // onClick={() => del(record._id)}
           >
             删除</Button>
         </AuthComponent>
       </Popconfirm>
     ),
   }