import publicJS from "@/untils/public"; import api from '@/api/api'; import { routes, mainMenu } from '@/router/routes' import body from '@/components/body' import error from '@/components/404.vue' import $ls from '@/untils/localStorageUtil' //根据后端菜单配置获取路由 //@author visy.wang //注意: 目前只能处理最多两个层级 var getRouterByMenu = function (menu) { if (!menu) {//菜单不存在->路由也不存在 return null; } let viewPath = menu.menuUrl; if (viewPath == null || !(viewPath + '').trim()) { viewPath = 'default'; } const router = (menu.menuLevel == 1) ? { //第一层路由 path: menu.menuPath, name: menu.menuName, meta: { isLink: true, role: menu.menuCode, cachePath: menu.menuPath, hidden: !!menu.hidden, }, iconCls: menu.menuIcon || 'dashboard', component: body, } : { path: menu.menuPath, name: menu.menuName, meta: { role: menu.menuCode, cachePath: menu.menuPath, hidden: !!menu.hidden, }, isParent: true, component: resolve => { require([`@/views/${viewPath}.vue`], resolve) }, } const subMenuList = menu['sysMenuVoList'];//子菜单列表 if (subMenuList && subMenuList.length) { router.children = []; for (let subMenu of subMenuList) { router.children.push(getRouterByMenu(subMenu)); } } return router; }; //404页面,应该放到最后面,匹配不到的所有链接都会跳转至该页面 const page404 = { path: '*', name: '404', component: error, meta: { role: '000', hidden: true } }; //保存按钮权限 function saveBtnAuth(menuList) { const menus = menuList ? menuList : $ls.get($ls.KEYS.MENU_LIST), btnAuth = {}; getBtnAuthByMenus(menus, btnAuth); $ls.set($ls.KEYS.BTN_AUTH, btnAuth); } //提取菜单按钮权限 var getBtnAuthByMenus = function (menus, btnAuth) { if (!menus || !menus.length) { return; } for (let menu of menus) { btnAuth[menu.menuCode] = menu.sysButtonVoList || []; getBtnAuthByMenus(menu.sysMenuVoList, btnAuth); } } const perm = { state: { routers: routes, addRouters: [], perms: false,//判断是否刷新过页面, permsList: null }, mutations: { SET_ROUTERS: (state, obj) => { state.routers = routes.concat(obj.asRouters);//设置路由表 state.addRouters = obj.asRouters;//动态路由表 state.perms = true;//登录状态 state.permsList = obj.permsList;//权限字符串 }, CLEAR_ROUTERS: (state) => { state.routers = routes; state.addRouters = []; state.perms = false; state.permsList = null; $ls.remove([ $ls.KEYS.TOKEN_ID, $ls.KEYS.MENU_LIST, $ls.KEYS.WAREHOUSE_LIST, 'userName', 'nickName', 'warehouse' ]); sessionStorage.removeItem("tagView"); window.location.reload();//此处退出vuex状态不刷新,目前发现重载页面可以处理。。 } }, actions: { setRouters({ dispatch, commit, state }, menuList) { saveBtnAuth(menuList);//保存按钮权限 if (!menuList) { menuList = $ls.get($ls.KEYS.MENU_LIST); if (!menuList) { dispatch("loginOut") } } return new Promise((resolve, reject) => {//动态加载路由权限 let asRouters = []; if (menuList) { for (let menu of menuList) { asRouters.push(getRouterByMenu(menu)) } } asRouters.push(page404);//404页面追加 commit('SET_ROUTERS', { asRouters: asRouters, permsList: [] }); resolve(true); }); }, loginOut({ commit }) { return new Promise((resolve, reject) => { publicJS.getApi(api.userLogout).then(res => { if (res.result) { commit('CLEAR_ROUTERS');//清除登陆数据; } resolve(res); }).catch(error => { commit('CLEAR_ROUTERS');//清除登陆数据; reject(error); }) }) } } } export default perm
vue动态路由
于 2019-01-17 13:58:55 首次发布