react 操作权限思路

2019独角兽企业重金招聘Python工程师标准>>>

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);

}

 

转载于:https://my.oschina.net/u/592476/blog/889431