react 操做權限思路

1. 用戶登陸後初始化操做權限代碼,存儲在store中，

2.遍歷store遍歷判斷是否擁有該按鈕操做權限

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

export function hasAuthentication(Component) {

    class WrapAuthComponent extends React.Component {

        constructor(props) {
            super(props);
        }

        render () {
            let { permissions, auth, dispatch, ...rest } = this.props;
            let isAuthenticated = false;

            for(let i= permissions.length;i--;) {
                if(auth === permissions[i]){
                     isAuthenticated = true;
                     break;
                }
            }
            if( isAuthenticated ) {
                return (<Component {...rest}/>);
            }else {
                return null;
            }
        }
    }
    
    const mapStateToProps = (state) => ({
        permissions: state.system.menu.permissions || [],
    });

    WrapAuthComponent.propTypes = {
        auth:PropTypes.string.isRequired,
        permissions: PropTypes.array,
    }

    WrapAuthComponent.defaultProps = {
        auth:'',
        permissions: [],
    }

    return connect(mapStateToProps)(WrapAuthComponent);

}