基本原理讲解:实现后端控制按钮操作权限,首先后端需要有一个总的权限列表,然后依据登录的用户角色类型,给予部分或者全部的列表项组成数组,在登录的时候通过响应体返回给前端,这时候前端需要将其全局保存(假设为powerList),然后在需要用到操作按钮的地方使用targetCode自定义数组,这边每个按钮都需要提供一个btnCode,btnCode的值需要是数据库中有存在的,而非powerList中存在的,因为登录不同的角色,给的列表不一样,前端需要根据数据库存在的所有btnCode记录去判断, 一个一个的判断,遍历 powerList 对比code是否存在,不存在就不渲染该按钮
什么?还不明白?往下看代码就懂了
如下图,后端通过getFunction接口提供了一个code权限码集合:
这个一般是在登录时获取的,并且,前端需要将它存储在全局状态中,以便在各个组件中获取,再写一个AccessBtn组件,并使用传递进来的参数:
// 通用组件
import React from 'react';
import { Button } from 'antd';
import { connect } from 'react-redux';
// import * as getData from '../../utils/fetch';
// 权限功能按钮组件
/**
* @param type: 可选普通按钮和按钮组Button、ButtonGroup,默认Button
* @param targetCode:
*/
class AccessBtn extends React.Component {
constructor(props) {
super(props);
this.state = {
button: [],
btnCode: []
}
}
componentWillReceiveProps(props) {
const { targetCode, accessCollection } = props;
this.getButtonTpl(targetCode, accessCollection);
}
componentWillMount() {
const { targetCode, accessCollection } = this.props;
this.getButtonTpl(targetCode, accessCollection);
}
getButtonTpl = (targetCode, accessCollection) => {
let button = [], btnCode = [];
targetCode.forEach((btn, idx) => {
accessCollection.forEach(item => {
// if(item.code === btn.code && btnCode.indexOf(btn.code)<0 ){
if (item.code === btn.code) {
btnCode.push(btn.code);
let param = btn.handleButtonParam;
button.push(<Button key={btn.btnKey || btn.code} type={btn.type} size={btn.small || "default"} onClick={() => { btn.handleButton(param) }} style={btn.style} disabled={btn.isDisabled}>{btn.btnName}</Button>)
}
})
});
this.setState({
button
});
}
render() {
if (this.props.type === "ButtonGroup") {
return <div style={{ display: 'inline-block' }}>
<Button.Group>{this.state.button}</Button.Group>
</div>
} else {
return <div style={{ display: 'inline-block' }}>
{this.state.button}
</div>
}
}
}
const mapStateToProps = (state) => {
return {
accessCollection: state.Login.accessCollection
};
};
export default connect(mapStateToProps, null)(AccessBtn);
现在是真正的调用:
componentWillMount() {
const userId = cookies.get("userId")
// // columns只放在这里无法实时更新!!!
const columnsPrd = [{
title: '发行起始日',
dataIndex: 'prd.prdIssueDate',
width: 100,
sorter: true,
render: (text, record) => {
return moment(moment(text), "YYYY/MM/DD").format("YYYY/MM/DD");
}
}, {
title: '代码',
dataIndex: 'prd.prdCode',
sorter: true,
width: 100,
render: (text, row, index) => {
return <Tooltip placement="top" title={text}><div className={'textOverflow'} style={{ width: 80 }} >{text}</div></Tooltip>
},
}, {
title: '简称',
dataIndex: 'prd.prdShortName',
sorter: true,
width: 150,
render: (text, row, index) => {
return {
children: <Tooltip placement="top" title={text}>
<div className={'textOverflow'} style={{ width: 130 }} >
<a href="javascript:;" onClick={() => this.showDetailProjModal(row)}>{text}</a>
</div>
</Tooltip>,
};
},
}, {
title: '期限',
dataIndex: 'prd.prdTerm',
sorter: true,
width: 60,
}, {
title: '计划发行规模',
dataIndex: 'prd.prdAmount',
sorter: true,
width: 130
}, {
title: '债项评级',
dataIndex: 'prd.prdDebtRatingName',
sorter: true,
width: 100
}, {
title: '主体评级',
dataIndex: 'prd.prdIssuer.comRatingName',
sorter: true,
width: 100
}, {
title: '企业类型',
dataIndex: 'prd.prdIssuer.comTypeName',
sorter: true,
width: 100
}, {
title: '缴款日',
dataIndex: 'prd.prdPayDate',
sorter: true,
width: 100,
render: (text, record) => {
return moment(moment(text), "YYYY/MM/DD").format("YYYY/MM/DD");
}
}, {
title: '发行人省份',
dataIndex: 'prd.prdIssuer.area',
sorter: true,
width: 100
}, {
title: '中类行业',
dataIndex: 'prd.prdIssuer.belongIndustryName',
sorter: true,
width: 100,
render: (text, row, index) => {
return <Tooltip placement="top" title={text}><div className={'textOverflow'} style={{ width: 80 }} >{text}</div></Tooltip>
},
}, {
title: '簿记管理人',
dataIndex: 'prd.bookRunner',
sorter: true,
render: (text, row, index) => {
return <Tooltip placement="top" title={text}><div className={'textOverflow'} style={{ width: 130 }} >{text}</div></Tooltip>
},
}];
const operate = {
title: '操作',
width: 280,
fixed: 'right',
render: (text, record) => {
const targetCode = [];
if (userId == record.projSalesLeader && record.stopTenderStatus == 1) {
targetCode.push({
code: "125001102", btnName: "分配", handleButton: () => {
this.distribute(record)
},
handleButtonParam: record,
type: "primary",
small: 'small',
style: { marginRight: 8 }
})
}
if (record.stopTenderStatus == 1) {
targetCode.push({
code: "125001101", btnName: "投标", handleButton: () => {
this.tender(record)
},
handleButtonParam: record,
type: "primary",
small: 'small',
style: { marginRight: 8 }
})
}
return <div>
<AccessBtn
targetCode={targetCode}
/>
</div>
}
};
columnsPrd.push(operate);
this.setState({
columnsPrd
});
}