React 动态菜单

前端权限控制一般有4种

1.菜单的控制

2.界面的控制

3.按钮的控制

4.请求和响应的控制

本文主要讲述如何使用react框架事件前端权限对菜单的控制。

第一步：

准备菜单数据，在该菜单数据中配置好路由跳转的路径和组件存在的路径。

菜单数据如下所示：

permissionList：[{
permission_no: 1
menu_name: "系统设置"
menu_url: "/index/sysIndex"
path_name: "systemIndex"
component_path: "user/Home/SystemIndex"
menu_imgClass: ""
menu_state: 0
menu_father: 0
menu_id: 1
chidPermissions:[
{
permission_no: 2
menu_name: "会员信息统计"
menu_url: "/index/sysIndex/userTotal"
path_name: "loginLog"
component_path: "user/Home/UserTotal"
menu_imgClass: null
menu_state: 0
menu_father: 1
menu_id: 11
chidPermissions: []},


{
permission_no: 2
menu_name: "登录日志"
menu_url: "/index/sysIndex/loginLog"
path_name: "loginLog"
component_path: "user/Home/LoginLog"
menu_imgClass: null
menu_state: 0
menu_father: 1
menu_id: 11
chidPermissions: []},

{
permission_no: 3
menu_name: "个人中心"
menu_url: "/index/sysIndex/userSet"
path_name: "userSet"
component_path: "user/Home/UserSet"
menu_imgClass: null
menu_state: 0
menu_father: 1
menu_id: 12
chidPermissions: []}
]},
{
permission_no: 4
menu_name: "任务管理"
menu_url: "/index/task"
path_name: "task"
component_path: "user/Task/TaskManger"
menu_imgClass: null
menu_state: 0
menu_father: 0
menu_id: 2,
chidPermissions:[
{
permission_no: 5
menu_name: "任务完成记录"
menu_url: "/index/task/taskFinish"
path_name: "taskFinish"
component_path: "user/Task/TaskFinish"
menu_imgClass: null
menu_state: 0
menu_father: 2
menu_id: 21
chidPermissions: []
},{
permission_no: 6
menu_name: "任务列表"
menu_url: "/index/task/taskList"
path_name: "taskList"
component_path: "user/Task/TaskList"
menu_imgClass: null
menu_state: 0
menu_father: 2
menu_id: 22
chidPermissions: []
}
]
},
{
permission_no: 7
menu_name: "权限管理"
menu_url: "/index/permission"
path_name: "permission"
component_path: "user/UserRole/Permission"
menu_imgClass: null
menu_state: 0
menu_father: 0
menu_id: 3,
chidPermissions:[
{
permission_no: 8
menu_name: "角色管理"
menu_url: "/index/permission/roleMange"
path_name: "roleManger"
component_path: "user/UserRole/RoleMange"
menu_imgClass: null
menu_state: 0
menu_father: 3
menu_id: 31
chidPermissions: []
},
{
permission_no: 9
menu_name: "用户管理"
menu_url: "/index/permission/userMange"
path_name: "userMange"
component_path: "user/UserRole/UserMange"
menu_imgClass: null
menu_state: 0
menu_father: 3
menu_id: 32
chidPermissions: []
}
]
},

{
permission_no: 10
menu_name: "小程序管理"
menu_url: "/index/appMange"
path_name: "appMange"
component_path: "user/AppAs/AppMange"
menu_imgClass: null
menu_state: 0
menu_father: 0
menu_id: 4,
chidPermissions:[
{
permission_no: 11
menu_name: "客服管理"
menu_url: "/index/appMange/serviceMange"
path_name: "serviceMange"
component_path: "user/AppAs/ServiceMange"
menu_imgClass: null
menu_state: 0
menu_father: 4
menu_id: 41
chidPermissions: []
},
{
permission_no: 12
menu_name: "导航管理"
menu_url: "/index/appMange/navMange"
path_name: "navMange"
component_path: "user/AppAs/NavMange"
menu_imgClass: null
menu_state: 0
menu_father: 4
menu_id: 42
chidPermissions: []
}
]
},
{
permission_no: 13
menu_name: "会员管理"
menu_url: "/index/memberMange"
path_name: "memberMange"
component_path: "user/UserSet/MemberMange"
menu_imgClass: null
menu_state: 0
menu_father: 0
menu_id: 5,
chidPermissions: [
{
permission_no: 14
menu_name: "会员等级设置"
menu_url: "/index/memberMange/memberLevel"
path_name: "memberLevel"
component_path: "user/UserSet/MemberLevel"
menu_imgClass: null
menu_state: 0
menu_father: 5
menu_id: 51
chidPermissions: []
},
{
permission_no: 15
menu_name: "会员积分"
menu_url: "/index/memberMange/memberScores"
path_name: "memberScores"
component_path: "user/UserSet/MemberScores"
menu_imgClass: null
menu_state: 0
menu_father: 5
menu_id: 52
chidPermissions: []
},
{
permission_no: 16
menu_name: "会员管理列表"
menu_url: "/index/memberMange/memberList"
path_name: "memberList"
component_path: "user/UserSet/MemberList"
menu_imgClass: null
menu_state: 0
menu_father: 5
menu_id: 53
chidPermissions: []
}
]
},

{
permission_no: 17
menu_name: "文章管理"
menu_url: "/index/articleMange"
path_name: "articleMange"
component_path: "user/TxtAs/ArticleMange"
menu_imgClass: null
menu_state: 0
menu_father: 0
menu_id: 6,
chidPermissions: [
{
permission_no: 18
menu_name: "文章分类"
menu_url: "/index/articleMange/articleClass"
path_name: "articleClass"
component_path: "user/TxtAs/ArticleClass"
menu_imgClass: null
menu_state: 0
menu_father: 6
menu_id: 61
chidPermissions: []
},{
permission_no: 19
menu_name: "审核文章"
menu_url: "/index/articleMange/articleAudit"
path_name: "articleAudit"
component_path: "user/TxtAs/ArticleAudit"
menu_imgClass: null
menu_state: 0
menu_father: 6
menu_id: 62
chidPermissions: []
}
]
},
{
permission_no: 20
menu_name: "意见与建议"
menu_url: "/index/advise"
path_name: "advise"
component_path: "user/Opinion/Advise"
menu_imgClass: null
menu_state: 0
menu_father: 0
menu_id: 7
chidPermissions: [
{
permission_no: 21
menu_name: "意见与建议"
menu_url: "/index/advise/OpinionAs"
path_name: "advise"
component_path: "user/Opinion/OpinionAs"
menu_imgClass: null
menu_state: 0
menu_father: 7
menu_id: 71
chidPermissions: []
}
]
}

]

第二步搭建项目结构

image

其中component的结构如下：

image

第三步动态生成菜单，写成一个组件：

 // 生成左边菜单
  bindMenu(menulist){
    let MenuList= menulist.map((item)=>{
      if(item.chidPermissions.length===0){  //没有子菜单
        return <Menu.Item key={item.permission_no} onClick={()=>this.add(item.menu_name,item.menu_url,item.menu_id)} ><Link to={item.menu_url}>{item.menu_name}</Link></Menu.Item>
      }
      else{
        return <SubMenu key={item.permission_no} icon={<UserOutlined />} title={item.menu_name}>
       {this.bindMenu(item.chidPermissions)}
        </SubMenu>
      }

    })
    return MenuList
  }
  componentWillMount() {
    console.log("will mount")
    // console.log(JSON.parse(this.props.user.user.permissionList))
    // let menuList = window.sessionStorage.getItem('user')?(JSON.parse(window.sessionStorage.getItem('user'))):[];
    // console.log('类相关',typeof menuList);
    let leftMenu = this.bindMenu(this.props.user.user.permissionList);
    this.setState({
      leftMenu:leftMenu
    })
  }

第四步
动态生成路由，写成一个组件

 // 动态生成路由
  bindRouter(list){
    let routerList = list.map((item)=>{
      if(item.chidPermissions.length === 0){
        return <Route key={item.permission_no} path={item.menu_url} component={loadable(()=>import(`./${item.component_path}`))}></Route>
      }else {
        return <Route key={item.permission_no} path={item.menu_url} render={()=>{
            let componentName = loadable(()=>import(`./${item.component_path}`));
            return <componentName>
              {this.bindRouter(item.chidPermissions)}
            </componentName>
        }}>
        </Route>

      }
    })
    return routerList
  }
  componentDidMount() {
    let routerList = this.bindRouter(this.props.user.user.permissionList)
    console.log('routerList',routerList);
    this.setState({
      routerList:routerList
    })
  }

第五步调用菜单组件和动态路由组件