通常公司的后台管理系统都需要权限控制，即不同的角色用户看到不同的菜单，如下图：
下面，通过react实现这样的后台管理系统(脚手架)，功能简介：
直接上代码：
路由配置：
顶部菜单项单独成了一个组件：
跳转
import { connect } from 'react-redux'
import { fetchPostsIfNeeded,updateSubMenuWhenClick } from '../actions/count'
import { Menu } from 'antd';
class TopMenu extends Component {
constructor(props){
super(props);
this.handleMenuClick = this.handleMenuClick.bind(this);
}
handleMenuClick(e){
// console.log(e.item.props['data-menukey']);
const { updateSubMenuWhenClick } = this.props
updateSubMenuWhenClick(true,e.item.props['data-menukey'])
}
componentWillMount() {
}
componentDidMount() {
const { fetchPostsIfNeeded } = this.props
fetchPostsIfNeeded()
}
render() {
const { menuList,fetchPostsIfNeeded } = this.props
if(menuList.length != 0) {
fetchPostsIfNeeded(true,menuList[0].key)
}
return (
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={['0']}
style={{ lineHeight: '64px' }}
onClick={this.handleMenuClick}
>
{
menuList.map((e,index) =>
<Menu.Item key={index} data-menukey={e.key} >
<Link to={{ pathname: e.url }} >{e.name}</Link>
</Menu.Item>
)
}
</Menu>
)}
}
const getList = state => {
return {
menuList: state.update.menuList
}
}
export default connect(
getList,{ fetchPostsIfNeeded,updateSubMenuWhenClick }
)(TopMenu)
在render函数中，如果动态生成的顶部菜单数据长度不为0，则根据顶部菜单的key动态生成侧边菜单项。
