React组件实现权限按钮显示和隐藏

在一些管理后台中，经常会编写权限这一块功能模块，通过调用后端返回的接口，匹备权限码来控制显示和隐藏，

按钮权限控制显示和隐藏

• 需要和后端沟通好，通过给用户分配权限(权限码)，通过接口的形式，后端返回权限码存储到redux中。

编辑高级组件

• role_button:存储到redux的权限码
• button 按钮级别传的权限码

import React, { Component,Fragment } from 'react'
import PropTypes from 'prop-types';
import {withRouter} from 'react-router-dom'
import { connect } from 'react-redux'


// 按钮权限校验 根据权限码匹备
const AuthButton = (props) => {
    const { button,role_button,children } = props
    return (
        role_button.includes(button) ? children : null
    )
}



// 校验数据类型
AuthButton.propTypes = {
    button: PropTypes.string,
}
// 默认
AuthButton.defaultProps = {
    button: "",
}


const mapStateToProps = (state) => ({
    role_button: state.app.button
})

export default connect(
    mapStateToProps,
    null
)(withRouter(AuthButton))

如何使用

• 在需要的组件中引入编写好的这个组件(AuthButton )组件
• 通过给button传权限吗，可以控制显示和隐藏

<div className="inline-button">
         <AuthButton button="department:edit">
                  <Button type="primary">
                           <Link to={{pathname:'/index/department/add',state:{id:rowData.id}}}>编辑</Link>
                    </Button>
        </AuthButton>
         <AuthButton button="department:delete">
                    <Button onClick={()=>this.delete(rowData.id)}>删除</Button>
       </AuthButton>

  </div>

通过以上代码，控制权限按钮就可以实现显示和隐藏了。