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

下面，通过react实现这样的后台管理系统(脚手架)，功能简介：

1.左侧的菜单项根据用户的角色权限动态生成。

2.浏览器地址页键入无权限的地址会拦截

直接上代码：

render(){

let { routes, permission, menuList } = this.props;

//过滤有权限的菜单

menuList = menuList.filter(item=>permission[item.name.toLowerCase()]);

debugger

return (

theme="dark"

mode="horizontal"

defaultSelectedKeys={['2']}

style={{ lineHeight: '64px' }}

>

{

menuList.map((e, index) =>

{e.name}

)

}

className="trigger"

type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}

onClick={this.toggle}

/>

style={{

margin: '24px 16px',

padding: 0,

background: '#fff',

minHeight: 580,

}}

>

{

routes.map((route, i) => (

))

}

Ant Design ©2018 Created by Ant UED

)

}

//function RouteWithSubRoutes

export function RouteWithSubRoutes(route) {

let { permission, path, routes } = route;

let history = useHistory();

if(!hasPermission(permission, path)) {

history.push("/login");

return (

)

}

return (

path={path}

render={props => (

// pass the sub-routes down to keep nesting

)}

/>

);

}