高阶组件做权限验证

使用高阶组件

        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;