fix 修复 五级路由缓存无效问题

This commit is contained in:
疯狂的狮子Li
2023-11-10 16:36:52 +08:00
parent 87f824ff39
commit 49ca000a07
2 changed files with 141 additions and 133 deletions

View File

@@ -101,6 +101,10 @@ function filterChildren(childrenMap, lastRouter = false) {
} }
if (lastRouter) { if (lastRouter) {
el.path = lastRouter.path + '/' + el.path el.path = lastRouter.path + '/' + el.path
if (el.children && el.children.length) {
children = children.concat(filterChildren(el.children, el))
return
}
} }
children = children.concat(el) children = children.concat(el)
}) })

View File

@@ -1,133 +1,137 @@
import auth from '@/plugins/auth' import auth from '@/plugins/auth'
import router, { constantRoutes, dynamicRoutes } from '@/router' import router, { constantRoutes, dynamicRoutes } from '@/router'
import { getRouters } from '@/api/menu' import { getRouters } from '@/api/menu'
import Layout from '@/layout/index' import Layout from '@/layout/index'
import ParentView from '@/components/ParentView' import ParentView from '@/components/ParentView'
import InnerLink from '@/layout/components/InnerLink' import InnerLink from '@/layout/components/InnerLink'
const permission = { const permission = {
state: { state: {
routes: [], routes: [],
addRoutes: [], addRoutes: [],
defaultRoutes: [], defaultRoutes: [],
topbarRouters: [], topbarRouters: [],
sidebarRouters: [] sidebarRouters: []
}, },
mutations: { mutations: {
SET_ROUTES: (state, routes) => { SET_ROUTES: (state, routes) => {
state.addRoutes = routes state.addRoutes = routes
state.routes = constantRoutes.concat(routes) state.routes = constantRoutes.concat(routes)
}, },
SET_DEFAULT_ROUTES: (state, routes) => { SET_DEFAULT_ROUTES: (state, routes) => {
state.defaultRoutes = constantRoutes.concat(routes) state.defaultRoutes = constantRoutes.concat(routes)
}, },
SET_TOPBAR_ROUTES: (state, routes) => { SET_TOPBAR_ROUTES: (state, routes) => {
state.topbarRouters = routes state.topbarRouters = routes
}, },
SET_SIDEBAR_ROUTERS: (state, routes) => { SET_SIDEBAR_ROUTERS: (state, routes) => {
state.sidebarRouters = routes state.sidebarRouters = routes
}, },
}, },
actions: { actions: {
// 生成路由 // 生成路由
GenerateRoutes({ commit }) { GenerateRoutes({ commit }) {
return new Promise(resolve => { return new Promise(resolve => {
// 向后端请求路由数据 // 向后端请求路由数据
getRouters().then(res => { getRouters().then(res => {
const sdata = JSON.parse(JSON.stringify(res.data)) const sdata = JSON.parse(JSON.stringify(res.data))
const rdata = JSON.parse(JSON.stringify(res.data)) const rdata = JSON.parse(JSON.stringify(res.data))
const sidebarRoutes = filterAsyncRouter(sdata) const sidebarRoutes = filterAsyncRouter(sdata)
const rewriteRoutes = filterAsyncRouter(rdata, false, true) const rewriteRoutes = filterAsyncRouter(rdata, false, true)
const asyncRoutes = filterDynamicRoutes(dynamicRoutes); const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true }) rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
router.addRoutes(asyncRoutes); router.addRoutes(asyncRoutes);
commit('SET_ROUTES', rewriteRoutes) commit('SET_ROUTES', rewriteRoutes)
commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes)) commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
commit('SET_DEFAULT_ROUTES', sidebarRoutes) commit('SET_DEFAULT_ROUTES', sidebarRoutes)
commit('SET_TOPBAR_ROUTES', sidebarRoutes) commit('SET_TOPBAR_ROUTES', sidebarRoutes)
resolve(rewriteRoutes) resolve(rewriteRoutes)
}) })
}) })
} }
} }
} }
// 遍历后台传来的路由字符串,转换为组件对象 // 遍历后台传来的路由字符串,转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) { function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
return asyncRouterMap.filter(route => { return asyncRouterMap.filter(route => {
if (type && route.children) { if (type && route.children) {
route.children = filterChildren(route.children) route.children = filterChildren(route.children)
} }
if (route.component) { if (route.component) {
// Layout ParentView 组件特殊处理 // Layout ParentView 组件特殊处理
if (route.component === 'Layout') { if (route.component === 'Layout') {
route.component = Layout route.component = Layout
} else if (route.component === 'ParentView') { } else if (route.component === 'ParentView') {
route.component = ParentView route.component = ParentView
} else if (route.component === 'InnerLink') { } else if (route.component === 'InnerLink') {
route.component = InnerLink route.component = InnerLink
} else { } else {
route.component = loadView(route.component) route.component = loadView(route.component)
} }
} }
if (route.children != null && route.children && route.children.length) { if (route.children != null && route.children && route.children.length) {
route.children = filterAsyncRouter(route.children, route, type) route.children = filterAsyncRouter(route.children, route, type)
} else { } else {
delete route['children'] delete route['children']
delete route['redirect'] delete route['redirect']
} }
return true return true
}) })
} }
function filterChildren(childrenMap, lastRouter = false) { function filterChildren(childrenMap, lastRouter = false) {
var children = [] var children = []
childrenMap.forEach((el, index) => { childrenMap.forEach((el, index) => {
if (el.children && el.children.length) { if (el.children && el.children.length) {
if (el.component === 'ParentView' && !lastRouter) { if (el.component === 'ParentView' && !lastRouter) {
el.children.forEach(c => { el.children.forEach(c => {
c.path = el.path + '/' + c.path c.path = el.path + '/' + c.path
if (c.children && c.children.length) { if (c.children && c.children.length) {
children = children.concat(filterChildren(c.children, c)) children = children.concat(filterChildren(c.children, c))
return return
} }
children.push(c) children.push(c)
}) })
return return
} }
} }
if (lastRouter) { if (lastRouter) {
el.path = lastRouter.path + '/' + el.path el.path = lastRouter.path + '/' + el.path
} if (el.children && el.children.length) {
children = children.concat(el) children = children.concat(filterChildren(el.children, el))
}) return
return children }
} }
children = children.concat(el)
// 动态路由遍历,验证是否具备权限 })
export function filterDynamicRoutes(routes) { return children
const res = [] }
routes.forEach(route => {
if (route.permissions) { // 动态路由遍历,验证是否具备权限
if (auth.hasPermiOr(route.permissions)) { export function filterDynamicRoutes(routes) {
res.push(route) const res = []
} routes.forEach(route => {
} else if (route.roles) { if (route.permissions) {
if (auth.hasRoleOr(route.roles)) { if (auth.hasPermiOr(route.permissions)) {
res.push(route) res.push(route)
} }
} } else if (route.roles) {
}) if (auth.hasRoleOr(route.roles)) {
return res res.push(route)
} }
}
export const loadView = (view) => { })
if (process.env.NODE_ENV === 'development') { return res
return (resolve) => require([`@/views/${view}`], resolve) }
} else {
// 使用 import 实现生产环境的路由懒加载 export const loadView = (view) => {
return () => import(`@/views/${view}`) if (process.env.NODE_ENV === 'development') {
} return (resolve) => require([`@/views/${view}`], resolve)
} } else {
// 使用 import 实现生产环境的路由懒加载
export default permission return () => import(`@/views/${view}`)
}
}
export default permission