connect.js:

import { connect } from 'react-redux';
 
export default connect(
  (state, ownProps) => {
    return { getMenuTree: state }
  }
)

AuthButton.js:

• 利用修饰器@connect，在AuthButton.js里面 可以通过props访问connect.js里面的属性， 将自己的props与redux的props结合

import React, { Component } from 'react';
import connect from './connect.js';

//  按钮权限根据后端接口的menuId来匹配，所以后端接口每一个按钮的menuId不允许更改
// 进页面把用户拥有的所有按钮权限的menuId的数组获取出来放入menuIdList，每一个按钮写成高阶组件，判断每个按钮的menuId是否存在menuIdList，没有就null

export const wrapAuth = ComposedComponent => {
   @connect class  AuthButton extends Component{
 
    state = {
      menuIdList:[],      // 用户拥有的所有按钮权限
      isAuth:false,      // 此按钮是否有权限  
    }
    
    componentDidMount(){
      const { menu, menu_id } = this.props;
      const flattenTree = menu.getTree.flattenTree;  
      flattenTree && flattenTree.filter(item => item.type === 2);
      // 获取该用户拥有的所有按钮权限的 id 集合  [1，2，3，4，5]   比如传入的组件按钮 id是 6 但是集合里不存在 表示他没有这个按钮的权限 bool就 false
      const menuIdList = flattenTree && flattenTree.map(item=>{
        return item.menuId;
      });
      // 一顿操作 得出是否有该按钮的权限 bool
      const bool = menuIdList && menuIdList.some(item=>item === menu_id); 
      this.setState({
        menuIdList,
        isAuth:bool,
      }) 
    }
  
    render() { 
      const { dispatch, menu, ...otherProps } = this.props;
      // console.log({...otherProps})
      return ( 
        this.state.isAuth ?  <ComposedComponent { ...otherProps } /> : null
      )
    }
  }
  return AuthButton
}

业务组件具体使用

import React from 'react';
import { Button } from 'antd'; 
import { wrapAuth } from './AuthButton'; 
const AuthButton = wrapAuth(Button); 
//  上传文件这个按钮id是14  跟后端约定好
class Cmp extends React.Component {
  render() {
    
    return ( 
          <AuthButton type="primary" menu_id={14}>     
              <Icon type="upload" /> 上传文件
          </AuthButton> 
    )
  }
}