模拟动态路由

This commit is contained in:
TimSpan 2025-04-30 15:30:44 +08:00
parent 430162ee4e
commit 7abf4bfa81
5 changed files with 602 additions and 49 deletions

View File

@ -7,7 +7,7 @@ import { type Component } from "vue";
import router from "@/router";
import { LOGIN_ROUTER } from "@/config/constant";
import { type RouteRecordRaw } from "vue-router";
import { getPages } from "./getPages";
const modules: Record<string, () => Promise<Component>> =
import.meta.glob<Component>("@/views/**/*.vue");
@ -15,14 +15,15 @@ export const initDynamicRouter = async () => {
const userStore = useUserStore();
const permissionStore = usePermissionStore();
//获取我授权的menu
// 获取我授权的menu
const resp = await getPages();
// const resp = await api.get<AuthMenuTree[]>("/management/auth/myAuthMenu");
// if (isEmpty(resp.data)) {
// message.warning("您没有任何权限");
// userStore.resetUserInfo();
// await router.replace(LOGIN_ROUTER.path);
// return Promise.reject("当前用户暂无授权权限,请联系管理员进行添加");
// }
if (isEmpty(resp.data)) {
message.warning("您没有任何权限");
userStore.resetUserInfo();
await router.replace(LOGIN_ROUTER.path);
return Promise.reject("当前用户暂无授权权限,请联系管理员进行添加");
}
const removeEmptyChildren = (data: AuthMenuTree[]) => {
return data.map((item) => {
if (item.type.value === "dir") {
@ -35,37 +36,37 @@ export const initDynamicRouter = async () => {
return item;
});
};
// permissionStore.initAuthMenuList(
// removeEmptyChildren(resp.data as AuthMenuTree[])
// );
//扁平化路由 提取children
// const flatAuthMenu = flatMenuList(resp.data as AuthMenuTree[]);
permissionStore.initAuthMenuList(
removeEmptyChildren(resp.data as AuthMenuTree[])
);
// 扁平化路由 提取children
const flatAuthMenu = flatMenuList(resp.data as AuthMenuTree[]);
// 动态添加路由
// flatAuthMenu.forEach((item) => {
// const route: RouteRecordRaw = {
// name: item.snowFlakeId,
// path: item.path,
// redirect: item.redirect,
// meta: {
// btnList: item.btnList,
// title: item.name,
// icon: item.icon,
// isFixed: false,
// isKeepAlive: item.isKeepAlive.extData?.boolVal ?? false,
// isFull: item.isFull.extData?.boolVal ?? false,
// remark: item.remark,
// },
// component: modules[`/src/views${item.path}/index.vue`],
// children: [],
// };
// if (item.isFull.extData?.boolVal) {
// //全屏路由添加到根路由下
// router.addRoute(route);
// } else {
// //非全屏路由添加到layout下
// router.addRoute("layout", route);
// }
// });
flatAuthMenu.forEach((item) => {
const route: RouteRecordRaw = {
name: item.snowFlakeId,
path: item.path,
redirect: item.redirect,
meta: {
btnList: item.btnList,
title: item.name,
icon: item.icon,
isFixed: false,
isKeepAlive: item.isKeepAlive.extData?.boolVal ?? false,
isFull: item.isFull.extData?.boolVal ?? false,
remark: item.remark,
},
component: modules[`/src/views${item.path}/index.vue`],
children: [],
};
if (item.isFull.extData?.boolVal) {
//全屏路由添加到根路由下
router.addRoute(route);
} else {
//非全屏路由添加到layout下
router.addRoute("layout", route);
}
});
};
const flatMenuList = (

555
src/router/getPages.ts Normal file
View File

@ -0,0 +1,555 @@
export const getPages = (): Promise<any> => {
return new Promise((resolve) => {
resolve({
code: 200,
data: [
{
btnList: [],
children: [
{
btnList: [],
children: [],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "CodiconOrganization",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: true,
},
label: "是",
value: 0,
},
link: "",
name: "部门架构",
orderIndex: null,
parentId: "1907342465921191936",
path: "/personnelManagement/departmentStructure",
redirect: "",
remark: "",
snowFlakeId: "1907343323534725120",
status: null,
type: {
extData: null,
label: "菜单",
value: "menu",
},
updateBy: null,
updateTime: null,
},
{
btnList: [],
children: [],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "LineMdAccount",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: true,
},
label: "是",
value: 0,
},
link: "",
name: "企业员工",
orderIndex: null,
parentId: "1907342465921191936",
path: "/personnelManagement/enterpriseStaff",
redirect: "",
remark: "",
snowFlakeId: "1907342952527564800",
status: null,
type: {
extData: null,
label: "菜单",
value: "menu",
},
updateBy: null,
updateTime: null,
},
{
btnList: [],
children: [],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "LineMdAccount",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: true,
},
label: "是",
value: 0,
},
link: "",
name: "安保员工",
orderIndex: null,
parentId: "1907342465921191936",
path: "/personnelManagement/securityStaff",
redirect: "",
remark: "",
snowFlakeId: "1907344307979816960",
status: null,
type: {
extData: null,
label: "菜单",
value: "menu",
},
updateBy: null,
updateTime: null,
},
],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "LineMdAccount",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: true,
},
label: "是",
value: 0,
},
link: "",
name: "人事管理",
orderIndex: null,
parentId: "0",
path: "/personnelManagement",
redirect: "",
remark: "",
snowFlakeId: "1907342465921191936",
status: null,
type: {
extData: null,
label: "目录",
value: "dir",
},
updateBy: null,
updateTime: null,
},
{
btnList: [],
children: [
{
btnList: [
{
extData: {
remark: "测试按钮2",
},
label: "测试按钮2",
value: "test2",
},
],
children: [],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "EosIconsRoleBinding",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
link: "",
name: "角色",
orderIndex: null,
parentId: "1904795567075102720",
path: "/system/role",
redirect: "",
remark: "",
snowFlakeId: "1904812573660811264",
status: null,
type: {
extData: null,
label: "菜单",
value: "menu",
},
updateBy: null,
updateTime: null,
},
],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "LineMdCogFilledLoop",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
link: "",
name: "系统管理",
orderIndex: null,
parentId: "0",
path: "/system",
redirect: "/system/user",
remark: "",
snowFlakeId: "1904795567075102720",
status: null,
type: {
extData: null,
label: "目录",
value: "dir",
},
updateBy: null,
updateTime: null,
},
{
btnList: [],
children: [
{
btnList: [],
children: [],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "LineMdList",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
link: "",
name: "菜单管理",
orderIndex: null,
parentId: "1905455414980382720",
path: "/development/menu",
redirect: "",
remark: "",
snowFlakeId: "1905455579321602048",
status: null,
type: {
extData: null,
label: "菜单",
value: "menu",
},
updateBy: null,
updateTime: null,
},
],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "LineMdDocumentCode",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
link: "",
name: "开发管理",
orderIndex: null,
parentId: "0",
path: "/development",
redirect: "",
remark: "",
snowFlakeId: "1905455414980382720",
status: null,
type: {
extData: null,
label: "目录",
value: "dir",
},
updateBy: null,
updateTime: null,
},
{
btnList: [],
children: [
{
btnList: [],
children: [],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "LineMdList",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
link: "",
name: "测试1菜单2",
orderIndex: null,
parentId: "1910252674549288960",
path: "/test1/test1menu2",
redirect: "",
remark: "",
snowFlakeId: "1910253280865292288",
status: null,
type: {
extData: null,
label: "菜单",
value: "menu",
},
updateBy: null,
updateTime: null,
},
{
btnList: [],
children: [],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "LineMdList",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
link: "",
name: "测试1菜单1",
orderIndex: null,
parentId: "1910252674549288960",
path: "/test1/test1menu1",
redirect: "",
remark: "",
snowFlakeId: "1910253160014811136",
status: null,
type: {
extData: null,
label: "菜单",
value: "menu",
},
updateBy: null,
updateTime: null,
},
{
btnList: [],
children: [
{
btnList: [],
children: [],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "LineMdList",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
link: "",
name: "测试2菜单2",
orderIndex: null,
parentId: "1910252952203825152",
path: "/test1/test2/test2menu2",
redirect: "",
remark: "",
snowFlakeId: "1910253703755993088",
status: null,
type: {
extData: null,
label: "菜单",
value: "menu",
},
updateBy: null,
updateTime: null,
},
{
btnList: [],
children: [],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "LineMdList",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
link: "",
name: "测试2菜单1",
orderIndex: null,
parentId: "1910252952203825152",
path: "/test1/test2/test2menu1",
redirect: "",
remark: "",
snowFlakeId: "1910253563792068608",
status: null,
type: {
extData: null,
label: "菜单",
value: "menu",
},
updateBy: null,
updateTime: null,
},
],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "CarbonSubtractAlt",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: true,
},
label: "是",
value: 0,
},
link: "",
name: "测试2",
orderIndex: null,
parentId: "1910252674549288960",
path: "/test2",
redirect: "",
remark: "",
snowFlakeId: "1910252952203825152",
status: null,
type: {
extData: null,
label: "目录",
value: "dir",
},
updateBy: null,
updateTime: null,
},
],
createBy: null,
createTime: null,
deleteFlag: null,
icon: "CarbonSubtractAlt",
isFull: {
extData: {
boolVal: false,
},
label: "否",
value: 1,
},
isKeepAlive: {
extData: {
boolVal: true,
},
label: "是",
value: 0,
},
link: "",
name: "测试1",
orderIndex: null,
parentId: "0",
path: "/test1",
redirect: "",
remark: "",
snowFlakeId: "1910252674549288960",
status: null,
type: {
extData: null,
label: "目录",
value: "dir",
},
updateBy: null,
updateTime: null,
},
],
message: "操作成功!",
});
});
};

View File

@ -37,10 +37,10 @@ router.beforeEach(async (to, from, next) => {
// }
//
// // 6.如果没有菜单列表,就重新请求菜单列表并添加动态路由
// if (isEmpty(permissionStore.authMenuList)) {
// await initDynamicRouter();
// return next({ ...to, replace: true });
// }
if (isEmpty(permissionStore.authMenuList)) {
await initDynamicRouter();
return next({ ...to, replace: true });
}
//放行
return next();
});

View File

@ -1,11 +1,7 @@
<template>
<div> 菜单</div>
<div>菜单</div>
</template>
<script setup lang="ts">
<script setup lang="ts"></script>
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

View File

@ -1,3 +1,4 @@
<template>
<div>待开发</div>
</template>