权限按钮，跟权限路由一样，不同的角色登录app,展示不同的菜单页面，一个页面内管理可以进行删除记录等操作，普通的成员之有阅读的权限，这就是权限按钮需要做的事。

实现效果

• 三个按钮全显示。

• 后端没有返回该用户的新增权限
  

• 与前面的原理差不多。

代码实现

思路运用HOC函数来实现，对按钮组件进行提前处理，从后端获取用户的权限数据，然后再进行相关的前端配置.

• WithAuthButton.js

import { useSelector } from 'react-redux'
function WithAuthButton(props) {const permission = useSelector((state) => state.getIn(['base', 'info']))const permissionArr = permission.get('permission').toJS()const { children, auth } = props//后端返回的无权限数据h，或者是前端配置的权限数据与后端返回的数据不匹配，则不显示const isShow = permissionArr.some((item) => auth.includes(item))if (!permissionArr.length || !isShow) return null// 否则就展示数据return { ...children }
}
export default WithAuthButton

• 使用

import { Button, Dialog, setDefaultConfig, Space, Toast } from 'antd-mobile'
import { http } from '../api/request'
import { useEffect } from 'react'
import { useSelector } from 'react-redux'
import WithAuthButton from '../components/WithAuthButton'
function Home() {const dataList = useSelector((state) => state.getIn(['store', 'list']))const count = useSelector((state) => state.getIn(['store', 'count']))return (<div className='home-box'><br /><Space><Button onClick={() => Toast.info('点击了按钮')}>点我</Button><WithAuthButton auth={['add']}><Button color='primary'>新增</Button></WithAuthButton><WithAuthButton auth={['read']}><Button color='primary'>显示</Button></WithAuthButton><WithAuthButton auth={['delete']}><Button color='danger'>删除</Button></WithAuthButton></Space></div>)
}
export default Home

这样我们就实现了权限按钮的控制。