高阶组件做权限验证

使用高阶组件

        return (
            <BasicLayout
                sideMenu={{
                    items: this.state.items, // 根据权限不同 显示不同的侧边菜单栏
                    Link: Link,
                    mode: 'default',
                    openCurrentOnly: false,
                    onCollapse: this.onCollapsed,
                    selectedKeys: [location.pathname.split('/')[1]]
                }}
            >
                <Authority type="page" code={code}>
                    <Breadcrumb>{breadcrumbItems}</Breadcrumb>
                    {this.props.children}
                </Authority>
            </BasicLayout>

import React from 'react';
import { connect } from 'react-redux';
import Store from '~/store/createStore';

@connect(state => ({
    permission: state.role.permission
}))
class Authority extends React.PureComponent {
    render() {
        const { permission, code, type, isPublic } = this.props;
        if (
            isPublic || ["abc", "efg" ].indexOf(code) > -1
        ) {
            return this.props.children;
        }
        if (permission && permission.indexOf(code) > -1) {
            return this.props.children;
        } else if (type === 'page') {
            return <page type="404" title="403" description="Forbidden" />;
        } else {
            return null;
        }
    }
}

Authority.propTypes = {
    //type===page 显示404 页面
    type: PropTypes.string,
    isPublic: PropTypes.bool // isPublic为true则放开权限校验
};

export function getAuthority(code) {
    const permission = Store.getState().role.permission;
    return permission && permission.indexOf(code) > -1;
}

export function getItsmAuthority() {
    return Store.getState().role.authority;
}

export default Authority;