// 登录用户信息 const user = { name: '', // 用户名 avatar: '', // 用户头像 auth: [], // 用户权限 hasAuth: false // 是否已经加载用户权限 }; // 导航菜单 const nav = [];
通过 action 异步获取数据
// 获取用户权限 const getUserAuth = async ({commit}) => { const res = await http.post('YOUR_URL', {}); if (res === null) return; console.log('getUserAuth', res.param); commit('SET_USER_AUTH', res.param.auth); commit('SET_SIDE_NAV', res.param.nav); };
Vuex 中的 mutation 的相关代码
// 设置用户权限 const SET_USER_AUTH = (state, auth) => { state.user.auth = auth.concat('欢迎使用'); state.user.hasAuth = true; }; // 设置导航菜单 const SET_SIDE_NAV = (state, nav) => { // 导航菜单 let _nav = [{ name: '欢迎使用', url: "/main", iconCls: 'fa fa-bookmark' }]; // 权限菜单对应的路由地址 const route = { "系统管理": {iconCls: 'fa fa-archive', url: ''}, "Pmsadmin/Oragnize/list": {iconCls: '', url: '/system/organization'}, "Pmsadmin/Admin/list": {iconCls: '', url: '/system/user/index'}, "Pmsadmin/Role/list": {iconCls: '', url: '/system/auth'}, "Pmsadmin/Log/record": {iconCls: '', url: '/system/logs'}, "项目管理": {iconCls: 'fa fa-unlock-alt', url: ''}, "Pmsadmin/Project/list": {iconCls: '', url: '/project/list/index'}, "Pmsadmin/House/list": {iconCls: '', url: '/project/house'}, "Pmsadmin/Pack/list": {iconCls: '', url: '/project/pack'}, "广告位": {iconCls: 'fa fa-edit', url: ''}, "Pmsadmin/Place/list": {iconCls: '', url: '/adsplace/list'}, "投诉建议": {iconCls: 'fa fa-tasks', url: ''}, "Pmsadmin/Scategory/list": {iconCls: '', url: '/complain/type'}, "Pmsadmin/Complain/list": {iconCls: '', url: '/complain/list'}, "Pmsadmin/Suggest/list": {iconCls: '', url: '/complain/suggestion'}, "报事报修": {iconCls: 'fa fa-user', url: ''}, "Pmsadmin/Rcategory/list": {iconCls: '', url: '/rcategory/type'}, "Pmsadmin/Rcategory/info": {iconCls: '', url: '/rcategory/public'}, "Pmsadmin/Repair/list": {iconCls: '', url: '/rcategory/personal'}, "便民服务": {iconCls: 'fa fa-external-link', url: ''}, "Pmsadmin/Bcategory/list": {iconCls: '', url: '/bcategory/type'}, "Pmsadmin/Service/list": {iconCls: '', url: '/bcategory/list'}, "首座推荐": {iconCls: 'fa fa-file-text', url: ''}, "Pmsadmin/stcategory/list": {iconCls: '', url: '/stcategory/type'}, "Pmsadmin/Store/list": {iconCls: '', url: '/stcategory/list'}, "招商租赁": {iconCls: 'fa fa-leaf', url: ''}, "Pmsadmin/Bussiness/list": {iconCls: '', url: '/bussiness/list'}, "Pmsadmin/Company/list": {iconCls: '', url: '/bussiness/company'}, "Pmsadmin/Question/list": {iconCls: '', url: '/bussiness/question'}, "停车找车": {iconCls: 'fa fa-ra', url: ''}, "Pmsadmin/Cplace/list": {iconCls: '', url: '/cplace/cmanage'}, "Pmsadmin/Clist/list": {iconCls: '', url: '/cplace/clist'}, "Pmsadmin/Cquestion/list": {iconCls: '', url: '/cplace/cquestion'}, }; for (let key in nav) { let item = nav[key]; let _temp = {}; let subItems = []; // 二级菜单临时数组 if (item.children && item.children.length > 0) { // 二级菜单 item.children.forEach(subItem => { subItems.push(Object.assign({}, { name: subItem.name || '', url: route[subItem.url].url || '', iconCls: route[subItem.url].iconCls || '', })) }); // 一级菜单 _temp = Object.assign({}, { name: item.name || '', url: item.url || '', iconCls: route[item.name].iconCls || '', children: subItems.slice(0) }); _nav.push(_temp); } } state.nav = _nav; };
3. 后端接口返回内容
{ "status": 200, "info": "数据查询成功！", "param": { "nav": { "1": { "name": "系统管理", "url": "", "children": [ { "name": "组织结构", "url": "Pmsadmin/Oragnize/list" }, { "name": "人员管理", "url": "Pmsadmin/Admin/list" }, { "name": "角色管理", "url": "Pmsadmin/Role/list" }, { "name": "日志管理", "url": "Pmsadmin/Log/record" } ] }, "61": { "name": "广告位", "url": "", "children": [ { "name": "广告位列表", "url": "Pmsadmin/Place/list" } ] } }, "auth": [ "系统管理", "Pmsadmin/Oragnize/list", "Pmsadmin/Admin/list", "Pmsadmin/Role/list", "Pmsadmin/Log/record", "广告位", "Pmsadmin/Place/list" ] } }
存在的问题
新增 修改 删除 按钮还无法实现根据用户权限控制其显示
代码上还存在着不足，期待大神能够有更优的解决方案。