fix: 菜单动态配置兼容改造

main
wx-jincw 1 week ago
parent 132aaeb4c3
commit 8d62c6fc7e

@ -38,13 +38,15 @@ router.beforeEach(async(to, from, next) => {
} else {
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
// console.log('跳转1', to);
next()
} else {
try {
const roles = await store.dispatch('user/getInfo')
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
router.addRoutes(accessRoutes)
next({ ...to, replace: true })
// console.log('跳转2', to);
next({ path: to.redirectedFrom || to.path, replace: true })
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')

@ -62,33 +62,6 @@ import pmRouter from './modules/pm'
*/
export const constantRoutes = [
// 商品
storeRouter,
// 订单
orderRouter,
// 会员
userRouter,
// 分销
distributionRouter,
// 营销
marketingRouter,
// 财务
financialRouter,
// 内容
contentRouter,
// 设置
operationRouter,
// 应用
appSettingRouter,
// 维护
maintainRouter,
//移动端管理
mobileRouter,
// 代码生成
codegen,
// 物业管理
pmRouter,
{
path: '/404',
component: () => import('@/views/error-page/404'),
@ -155,6 +128,35 @@ export const asyncRoutes = [
]
export const tempRoutes = [
// 商品
storeRouter,
// 订单
orderRouter,
// 会员
userRouter,
// 分销
distributionRouter,
// 营销
marketingRouter,
// 财务
financialRouter,
// 内容
contentRouter,
// 设置
operationRouter,
// 应用
appSettingRouter,
// 维护
maintainRouter,
//移动端管理
mobileRouter,
// 代码生成
codegen,
// 物业管理
pmRouter,
]
const createRouter = () => new Router({
// mode: 'history', // require service support
mode: 'history',

@ -8,10 +8,12 @@
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { asyncRoutes, constantRoutes } from '@/router'
import router, { asyncRoutes, tempRoutes, constantRoutes } from '@/router'
import * as roleApi from '@/api/roleApi.js'
import * as Auth from '@/libs/wechat';
import {formatRoutes} from '@/utils/parsing'
import Layout from '@/layout'
/**
* Filter asynchronous routing tables by recursion
@ -57,25 +59,34 @@ const actions = {
generateRoutes({ commit }, roleid) {
return new Promise(async resolve => {
let accessedRoutes = []
let menus= []
// let menus= []
// const { rules } = await roleApi.getRoleById(roleid)
let menusAll = await roleApi.menuListApi()
let menusAll = await roleApi.menuListApi();
!Auth.isPhone() ? menusAll = menusAll.filter(item => item.component !== '/javaMobile') : menusAll = menusAll.filter(item => item.component === '/javaMobile')
// const routes = menusToRoutes(menusAll);
const routes = copyRoutes(tempRoutes);
const newRoutes = findRoutes(menusAll);
// console.log('newRoutes',newRoutes);
combineRoutes(routes, newRoutes);
router.addRoutes(routes); // 动态添加可访问路由表
// console.log('routes-end',routes);
menusAll = formatRoutes(menusAll)
!Auth.isPhone() ? menus = menusAll.filter(item => item.url !== '/javaMobile') : menus = menusAll.filter(item => item.url === '/javaMobile')
const _routerResult = comRouter(menus, asyncRoutes)
const _routerResult = comRouter(menusAll, asyncRoutes)
console.log('_routerResult',_routerResult);
accessedRoutes = filterAsyncRoutes(_routerResult)
// todo 这里控制是否过滤路由,经测试有些菜单不能予以设置,比如系统设置等等
this.state.settings.showSettings = false
commit('SET_ROUTES', menus)
commit('SET_TOPBAR_ROUTES', menus)
commit('SET_ROUTES', menusAll)
commit('SET_TOPBAR_ROUTES', menusAll)
if(this.state.settings.topNav){
commit('SET_SIDEBAR_ROUTERS', state.sidebarRouters.length ? state.sidebarRouters : menus[0].child)
commit('SET_SIDEBAR_ROUTERS', state.sidebarRouters.length ? state.sidebarRouters : menusAll[0].child)
}else{
commit('SET_SIDEBAR_ROUTERS', menus)
commit('SET_SIDEBAR_ROUTERS', menusAll)
}
// resolve(menus)
// commit('SET_ROUTES', accessedRoutes)
console.log('转化后的路由:', accessedRoutes);
resolve(accessedRoutes)
// commit('SET_ROUTES', asyncRoutes)
@ -99,6 +110,128 @@ function comRouter(menus, asyncRouter, hasLeft) {
return res
}
function copyRoutes(routes) {
const res = []
routes.forEach(route => {
const tmp = { ...route }
if (tmp.children) {
tmp.children = copyRoutes(tmp.children)
}
res.push(tmp)
})
return res
}
function findRoutes(menus, level = 0, prePath = '/') {
const accessedRoutes = []
menus.forEach(menu => {
let components = menu.component.split('/');
components = components.filter(item => !!item);
const newPath = components.join('/');
const tempRoute = findRoute(newPath, tempRoutes) || {};
let component = tempRoute.component || (level === 0 ? Layout : loadView(newPath));
let path = newPath;
if (newPath.startsWith(prePath)) {
path = newPath.replace(prePath, '');
}
const route = {
path: tempRoute.path || (level === 0 ? '/' + path : path), // 路由地址
component,
name: tempRoute.name || components[components.length - 1], // 路由名称
meta: {
title: menu.name,
icon: menu.icon
}
}
if (tempRoute.redirect) {
route.redirect = tempRoute.redirect
}
if (menu.childList && menu.childList.length > 0) {
route.children = findRoutes(menu.childList, level + 1, newPath + '/');
}
if (!tempRoute.path || (route.children && route.children.length > 0)) {
accessedRoutes.push(route)
}
})
return accessedRoutes
}
function combineRoutes(routers, fromRoutes) {
fromRoutes.forEach(frouter => {
const findex = routers.findIndex(r => r.path === frouter.path);
if (findex > -1) {
combineRoutes(routers[findex].children, frouter.children);
} else {
routers.push(frouter);
}
})
}
// function menusToRoutes(menus, level = 0) {
// const accessedRoutes = []
// menus.forEach(menu => {
// const components = menu.component.split('/');
// let path = components[components.length - 1];
// // const isML = menu.menuType === 'M';
// const newPath = components.filter(item => !!item).join('/');
// const tempRoute = findRoute(newPath, tempRoutes) || {};
// let component = tempRoute.component || (level === 0 ? Layout : loadView(newPath));
// const route = {
// path: tempRoute.path || (level === 0 ? '/' + path : path), // 路由地址
// component,
// name: tempRoute.name || path, // 路由名称
// meta: {
// title: menu.name,
// icon: menu.icon
// }
// }
// if (tempRoute.redirect) {
// route.redirect = tempRoute.redirect
// }
// if (menu.childList && menu.childList.length > 0) {
// route.children = menusToRoutes(menu.childList, level + 1);
// }
// accessedRoutes.push(route)
// })
// return accessedRoutes
// }
function loadView(view) {
if (process.env.NODE_ENV === 'development') {
return (resolve) => require([`@/views/${view}`], resolve)
} else {
// 使用 import 实现生产环境的路由懒加载
return () => import(`@/views/${view}`)
}
}
function findRoute(component, routes) {
const paths = component.split('/');
let tempRoute = null;
paths.forEach((item, index) => {
if (index === 0) {
tempRoute = findItemByPath(item, routes);
} else if (tempRoute) {
tempRoute = findItemByPath(item, tempRoute.children || []);
}
});
return tempRoute;
}
function findItemByPath(path, list) {
const index = list.findIndex(item => {
return item.path === path || item.path === '/' + path || item.path.startsWith(path + '/:');
});
return index > -1 ? list[index] : null;
}
export default {
namespaced: true,
state,

@ -1,8 +1,8 @@
import iHeaderI18n from '@/layouts/basic-layout/header-i18n'
// import iHeaderI18n from '@/layouts/basic-layout/header-i18n'
import { mapState } from 'vuex'
export default {
components: { iHeaderI18n },
// components: { iHeaderI18n },
computed: {
...mapState('admin/layout', [
'showI18n'

Loading…
Cancel
Save