import { asyncRoutes, constantRoutes } from '@/router' import Layout from '@/layout' import { getAuthMenu } from '@/api/user.js' const pathHandler = (item) => { if(!item.path || item.path?.includes('#') || item.path == ''){ return item.id + '_key' } if(/^\^/.test(item.path)){ return item.path.replace(/^\^+/g,"") } if(/^\$/.test(item.path)){ return item.path.replace(/^\$+/g,"") } return item.path // if(path.includes('$')){ // return path.replace(/^\$+/g,"") // } // if(path.includes('^')){ // return path.replace(/^\^+/g,"") // } // 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) } /** * 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: [], rootMenu:[], systemMenu:[], addRoutes: [], sidebarMenuMap: new Map() } /** * 后台查询的菜单数据拼装成路由格式的数据 * @param routes */ export function generaMenu(routes, data) { data.forEach(item => { let params = {}; if(item.path?.includes('?')){ let flag = item.path.split('?') item.path = flag[0] if(flag[1]){ let list = flag[1].split('&') list.forEach(item => { let kv = item.split('=') Object.defineProperty(params,kv[0],{ value:kv[1], writable:true, enumerable:true, configurable:false }) }) } } if (item.url === "/") { routes.push({ path: '/', component: Layout, redirect: '/worker', children: [{ path: 'dashboard', name: '系统首页', component: () => import('@/views/dashboard/index'), meta: { title: '系统首页', icon: 'dashboard', params } }] }) }else if(/^\^/.test(item.path)){ const menu = { path: pathHandler(item), component: Layout, children: [{ path: "", name: 'menu_' + item.id, component: (item.url.includes('#')||item.path == '') ? Layout : loadView(item.url), meta: { title: item.name, id: item.id, roles: ['admin'], auths:item.has_auth_node_tags, params, icon: item.icon } }, ] } if (item.children) { generaMenu(menu.children, item.children) } routes.push(menu) } else { var path = item.url; if (item.path != "null" && item.path != null && item.path != "") { path = item.path } const menu = { path: (path.includes('#') ? item.id + '_key' : path), redirect: item.redirect || '', component: componentHandler(item.url), hidden: item.hidden ?? false, children: [], name: 'menu_' + item.id, meta: { title: item.name, id: item.id, roles: ['admin'], params, 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) }, SET_ROOTMENU:(state,menu) => { state.rootMenu = menu }, SET_SYSTEMMENU:(state,menu) => { state.systemMenu = menu }, SET_SIDEBARMENUMAP: (state,{ k,v }) => { state.sidebarMenuMap.set(k,v) } } const actions = { generateRoutes({ commit }, roles) { return new Promise(resolve => { const loadMenuData = [] // 先查询后台并返回左侧菜单数据并把数据添加到路由 getAuthMenu(state.token).then(response => { let data = response commit('SET_ROOTMENU',data) let routes = data?.find(item => item.path === '/contract').children let root = data?.map(item => { let menu = [] generaMenu(menu,item.children) commit('SET_SIDEBARMENUMAP', { k: item.path, v: menu }) if(item.children.length > 0){ item.redirect = item.children[0]?.path } if(item.path === '/contract') { item.redirect = '/contract/dashboard' } item.hidden = true return item }) Object.assign(loadMenuData, [...routes,...root]) asyncRoutes.length=0; generaMenu(asyncRoutes, loadMenuData) //console.log(asyncRoutes) let accessedRoutes if (roles.includes('admin')) { accessedRoutes = asyncRoutes || [] } else { accessedRoutes = filterAsyncRoutes(asyncRoutes, roles) } accessedRoutes.push({ path: '*', redirect: '/404', hidden: true }) commit('SET_ROUTES', accessedRoutes) resolve(accessedRoutes) // generaMenu(asyncRoutes, data) }).catch(error => { console.log(error) }) }) } } export default { namespaced: true, state, mutations, actions }