需求描述

根据当前登录用户的角色来控制某些操作按钮是否显隐。

解决办法

在按钮对应的html上使用自定义指令，指定具有某权限的用户才显示该按钮。

在src/utils下新建文件btnPermission.tsx，代码如下：

/*
使用方法：在jsx中使用，包裹在需要进行权限控制的按钮或其他dom，如下：
<AuthButton needPermi={['maintainer', 'developer']}>
  <div>
    <Button>添加设备</Button>
  </div>
</AuthButton>

当用户角色为'maintainer'或者'developer'时，被AuthButton包裹的dom显示在页面中，否则不显示。
*/

import {connect} from 'dva';
import {ConnectState} from '@/models/connect';

interface Props{
  // 需要的角色，当前登录用户的角色满足任意一个即可
  needPermi: Array<string>; // 字符串数组
  // 当前登录用户的角色
  role: string;
  children: any; // 被本标签包裹的dom
}

const AuthButton = (props: Props)=>{
  // role为当前登录用户的角色，needPermi为使用AuthButton时传入的角色
  // 当role为needPermi中任意一个角色时，按钮则显示
  let {needPermi, role, children} = props;
  return (needPermi.includes(role)? children: null)
}

export default connect(({user}: ConnectState)=>({
  role: user.currentRole, // 当前登录用户的角色信息来自redux
}))(AuthButton);

注意：上面代码中角色信息是从redux中获取的，可根据自己项目情况修改获取角色信息的方式。