前端框架中，有一些成熟的RBAC权限代码，这里我要说的是，如何把核心RBAC代码实现到元素级别。
- 直接上代码AuthComponent.jsx
export let AuthComponent = ComposedComponent =>class WrapComponent extends Component {
constructor(props) {
super(props);
this.state = {
isShow: window.permissions && window.permissions.indexOf(this.props.auth)>-1,
};
}
componentDidMount(){
if (!window.permissions) {
//请将这里的url替换成你自己目标url，并按照你的返回数据格式解析
axios.get("sys/menu/user")
.then((response) => {
//permissions是你从服务端返回的权限列表
window.permissions = response.permissions;
this.setState({isShow: window.permissions && window.permissions.indexOf(this.props.auth)>-1});
})
.catch((error) => {
console.log(error);
});
}
}
static propTypes = {
auth:PropTypes.string.isRequired,
};
render() {
//如果权限有值，并且具备权限，那么创建按钮
return this.state.isShow?<ComposedComponent { ...this.props} />:null;
}
};
- 页面引用方式
//定义组件
const AuthButton = AuthComponent(Button);
export default class DemoPage extends Component {
constructor(props) {}
render() {
return <AuthButton auth="user:add" type="primary" onClick={this.dosomething}>新增用户</AuthButton>
}
}
其中auth就是你具备的后台返回的权限列表中的某一个权限
