后端接口返回按钮权限码集合数组 前端在按钮组件上写上后端提供的btnCode 实现后端控制按钮权限

基本原理讲解：实现后端控制按钮操作权限，首先后端需要有一个总的权限列表，然后依据登录的用户角色类型，给予部分或者全部的列表项组成数组，在登录的时候通过响应体返回给前端，这时候前端需要将其全局保存（假设为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

    });

  }