通常公司的后台管理系统都需要权限控制,即不同的角色用户看到不同的菜单,如下图:
下面,通过反应实现这样的后台管理系统(脚手架),功能简介:
1。顶部的菜单项根据用户的角色动态生成。
2。侧边测菜单项根据已选的顶部菜单动态生成。
直接上代码:
路由配置:
出口违约(
& lt;路由路径="/"组件={应用}比;
& lt; IndexRoute组件={EmployeeList}/比;
& lt;路由路径=={员工}"/员工"组件比;
& lt; IndexRoute组件={EmployeeList}/比;
& lt;路由路径="/员工/列表”组件={EmployeeList}/比;
& lt;路由路径="/雇员/细节/:id”组件={EmployeeDetail}/比;
& lt;/Route>
& lt;路由路径="/商品”组件={商品}比;
& lt; IndexRoute组件={GoodsList}/比;
& lt;路由路径="/商品/列表”组件={GoodsList}/比;
& lt;路由路径="/商品/细节/:id”组件={GoodsDetail}/比;
& lt;/Route>
& lt;/Route>
）
之前
顶部菜单项单独成了一个组件:
//动态数据
进口的反应,{组件}从“反应”
从“react-router”进口{链接}//引入链接处理导航跳转
从“react-redux”进口{连接}
进口{fetchPostsIfNeeded updateSubMenuWhenClick},从“. ./行动/计数”
从“antd”进口{菜单};
类TopMenu扩展组件{
构造函数(道具){
超级(道具);
这一点。handleMenuClick=this.handleMenuClick.bind(这个);
}
handleMenuClick (e) {//console.log (e.item.props [' data-menukey ']);
const {updateSubMenuWhenClick}=this.props
updateSubMenuWhenClick(真的,e.item.props [' data-menukey '])
}
componentWillMount () {
}
componentDidMount () {
const {fetchPostsIfNeeded}=this.props
fetchPostsIfNeeded ()
}
呈现(){
const {menuList, fetchPostsIfNeeded}=this.props
如果(menuList。长度!=0){
fetchPostsIfNeeded(真的,menuList [0]。key)
}
回报(
& lt;菜单
主题=昂诎怠?
模式="水平"
defaultSelectedKeys={(“0”)}
风格={{lineHeight: 64 px的}}>
const {menuList, fetchPostsIfNeeded}=this.props
如果(menuList。长度!=0){
fetchPostsIfNeeded(真的,menuList [0]。key)
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
