import { asyncRoutes, constantRoutes } from '@/router' import Layout from '@/layout' import { getAuthMenu } from '@/api/user.js' /** * Use meta.role to determine if the current user has permission * @param roles * @param route */ function hasPermission(roles, route) { if (route.meta && route.meta.roles) { return roles.some(role => route.meta.roles.includes(role)) } else { return true } } /** * 静态路由懒加载 * @param view 格式必须为 xxx/xxx 开头不要加斜杠 * @returns */ export const loadView = (view) => { return (resolve) => require([`@/views${view}`], resolve); } /** * Filter asynchronous routing tables by recursion * @param routes asyncRoutes * @param roles */ export function filterAsyncRoutes(routes, roles) { const res = [] routes.forEach(route => { const tmp = { ...route } if (hasPermission(roles, tmp)) { if (tmp.children) { tmp.children = filterAsyncRoutes(tmp.children, roles) } res.push(tmp) } }) return res } const state = { routes: [], addRoutes: [] } /** * 后台查询的菜单数据拼装成路由格式的数据 * @param routes */ const pathHandler = (path,id) => { if(path.includes('#') || path == ''){ return id + '_key' } return path } const componentHandler = (path) => { //return path === '#'|| path == '' ? Layout : loadView(path) if(path === '#' || path === ''){ return Layout } if(path.includes('#') && path !== '#'){ return ()=>import('@/layout/noLayout') } return loadView(path) } /** * 后台查询的菜单数据拼装成路由格式的数据 * @param routes */ export function generaMenu(routes, data) { data.forEach(item => { if (item.url === "/") { routes.push({ path: '/', component: Layout, redirect: '/dashboard', children: [{ path: 'dashboard', name: '系统首页', component: () => import('@/views/dashboard/index'), meta: { title: '系统首页', icon: 'dashboard' } }] }) } else if (item.url === "##") { routes.push({ path: item.path, component: Layout, children: [{ path: item.path, name: item.name, component: item.url === '#' ? Layout : loadView(item.path), meta: { title: item.name, id: item.id, roles: ['admin'], icon: item.icon } }] }) } else { var path = item.url; if (item.path != "null" && item.path != null && item.path != "") { path = item.path } const menu = { path: (path === '#' ? item.id + '_key' : path), redirect: (item.children.length > 0 ? "noRedirect" : ""), component: item.url === '#' ? Layout : loadView(item.url), // hidden: true, children: [], name: 'menu_' + item.id, meta: { title: item.name, id: item.id, roles: ['admin'], icon: item.icon } } if (item.children) { generaMenu(menu.children, item.children) } routes.push(menu) } }) } const mutations = { SET_ROUTES: (state, routes) => { state.addRoutes = routes state.routes = constantRoutes.concat(routes) } } // const actions = { // generateRoutes({ // commit // }, roles) { // const loadMenuData = [] // return new Promise(resolve => { // let accessedRoutes // let data = _routes2; // Object.assign(loadMenuData, data) // generaMenu(asyncRoutes, loadMenuData) // if (roles.includes('admin')) { // // alert(JSON.stringify(asyncRoutes)) // accessedRoutes = asyncRoutes || [] // } else { // accessedRoutes = filterAsyncRoutes(asyncRoutes, roles) // } // commit('SET_ROUTES', accessedRoutes) // resolve(accessedRoutes) // }) // } // } const actions = { generateRoutes({ commit }, roles) { return new Promise(resolve => { const loadMenuData = [] // 先查询后台并返回左侧菜单数据并把数据添加到路由 getAuthMenu(state.token).then(response => { let data = response //console.log(JSON.stringify(data)) Object.assign(loadMenuData, data) asyncRoutes.length=0; generaMenu(asyncRoutes, loadMenuData) let accessedRoutes if (roles.includes('admin')) { // alert(JSON.stringify(asyncRoutes)) accessedRoutes = asyncRoutes || [] } else { accessedRoutes = filterAsyncRoutes(asyncRoutes, roles) } commit('SET_ROUTES', accessedRoutes) resolve(accessedRoutes) // generaMenu(asyncRoutes, data) }).catch(error => { console.log(error) }) }) } } export default { namespaced: true, state, mutations, actions }