permission.js 配置路由拦截 router.beforeEach
let { menuList } = await store.dispatch('user/getInfo')
const getRoutesList = await store.dispatch('permission/getRoutesList', menuList )
let routerList = [...router.options.routes, ...getRoutesList, {
path: '*',
redirect: '/404',
hidden: true
}]
router.options.routes = routerList;
router.addRoutes(routerList)
next({
...to,
replace: true
})
vuex 中配置 路由菜单列表处理
import Layout from '@/layout'
export const filterRouter = (menusList) => {
const menus = []
menusList.map(item => {
var obj = {}
if (item.parentId === 0) {
obj = {
path: item.url,
component: Layout,
parentId: item.parentId,
menuId: item.menuId,
redirect: item.redirectUrl,
hidden: item.hidden == 1 ? false : true,
meta: {
title: item.displayName,
icon: item.icon
},
}
} else {
obj = {
path: item.url,
parentId: item.parentId,
menuId: item.menuId,
component: (resolve) => require([`@/views${item.url}`], resolve),
redirect: item.redirectUrl,
hidden: item.hidden == 1 ? false : true,
meta: {
title: item.displayName,
icon: item.icon
},
}
}
menus.push(obj)
})
const map = {}
menus.forEach(item => {
map[item.menuId] = item
})
const tree = []
menus.map(item => {
const pid = item.parentId
if (pid === 0) {
tree.push(item)
} else {
const parent = map[pid]
if (!parent.children) {
parent.children = [item]
} else {
parent.children.push(item)
}
}
})
return tree
}
const state = {
accesseRoutes: [],
};
const getters = {};
const mutations = {
SET_ACCESS_ROUTES: (state, routes) => {
state["accesseRoutes"] = routes;
},
};
const actions = {
async generateRoutes({
commit
}, menus) {
const accessedRoutes = await filterRouter(menus)
commit("SET_ACCESS_ROUTES", accessedRoutes);
return accessedRoutes
},
};
export default {
namespaced: true,
state,
getters,
mutations,
actions,
};