react实现菜单权限控制

通常公司的后台管理系统都需要权限控制，即不同的角色用户看到不同的菜单，如下图：

下面，通过react实现这样的后台管理系统(脚手架)，功能简介：
1.左侧的菜单项根据用户的角色权限动态生成。
2.浏览器地址页键入无权限的地址会拦截
直接上代码：

render(){
        let { routes, permission, menuList } = this.props;
        //过滤有权限的菜单
        menuList = menuList.filter(item=>permission[item.name.toLowerCase()]);
        debugger
        return (
            <Layout className="layout">
                <Header>
                    <div className="logo" >
                        {`${process.env.REACT_APP_PROJECT_NAME}`}
                    </div>
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['2']}
                        style={{ lineHeight: '64px' }}
                    >
                    </Menu>
                </Header>
                <Content>
                    <Layout>
                        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                            <Menu theme="dark" mode="inline" defaultSelectedKeys={['0']} selectedKeys={[this.state.selectedKeys]} onClick={this.menuClick}>
                                {
                                    menuList.map((e, index) =>
                                        <Menu.Item key={index}>
                                            <Link to={'/app/'+e.url} >
                                            <Icon type={e.icon} />
                                            <span>{e.name}</span>
                                            </Link>
                                        </Menu.Item>
                                    )
                                }
                            </Menu>
                        </Sider>
                        <Layout>
                            <Header style={{ background: '#fff', padding: 0 }}>
                                <Icon
                                    className="trigger"
                                    type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                    onClick={this.toggle}
                                />
                            </Header>
                            <Content
                                style={{
                                    margin: '24px 16px',
                                    padding: 0,
                                    background: '#fff',
                                    minHeight: 580,
                                }}
                            >
                                <Switch>
                                    {
                                        routes.map((route, i) => (
                                            <RouteWithSubRoutes key={i} {...route} permission={permission}/>
                                        ))
                                    }
                                </Switch>
                            </Content>
                            <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                        </Layout>
                    </Layout>
                </Content>
            </Layout>

        )
    }

//function RouteWithSubRoutes
export function RouteWithSubRoutes(route) {
    let { permission, path, routes } = route;
    let history = useHistory();
    if(!hasPermission(permission, path)) {
        history.push("/login");
        return (
            <div>
                <span>no auth</span>
            </div>
        )
    }
    return (
        <Route
            path={path}
            render={props => (
                // pass the sub-routes down to keep nesting
                <route.component {...props} routes={routes}  permission={permission}/>
            )}
        />
    );
}

代码可参考https://github.com/hy20090501/react-app