From 2856e71d226298740faf701fa9ee393c77a27376 Mon Sep 17 00:00:00 2001
From: xiaoxialulu <546464268@qq.com>
Date: Sat, 11 May 2024 17:52:15 +0800
Subject: [PATCH] "Refactor code for dynamic component loading
---
backend/.idea/workspace.xml | 101 +++++++++++++---------------
backend/logs/EasyPost_collect.log | 4 ++
web/src/routers/index.ts | 2 -
web/src/routers/modules/other.ts | 2 +-
web/src/store/modules/permission.ts | 17 +++--
web/src/store/modules/user.ts | 2 +-
web/src/utils/routers.ts | 33 ++++++++-
7 files changed, 94 insertions(+), 67 deletions(-)
diff --git a/backend/.idea/workspace.xml b/backend/.idea/workspace.xml
index 8e457a26..4696396f 100644
--- a/backend/.idea/workspace.xml
+++ b/backend/.idea/workspace.xml
@@ -4,20 +4,11 @@
-
-
-
+
-
-
-
-
-
-
-
@@ -173,7 +164,7 @@
-
+
@@ -487,23 +478,7 @@
-
-
-
-
- 1713343031288
-
-
-
- 1713343031288
-
-
-
- 1713343064618
-
-
-
- 1713343064619
+
@@ -881,7 +856,23 @@
1715061971799
-
+
+
+ 1715399077999
+
+
+
+ 1715399078000
+
+
+
+ 1715399092890
+
+
+
+ 1715399092890
+
+
@@ -911,32 +902,32 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/backend/logs/EasyPost_collect.log b/backend/logs/EasyPost_collect.log
index 25eeff81..9bd9bdca 100644
--- a/backend/logs/EasyPost_collect.log
+++ b/backend/logs/EasyPost_collect.log
@@ -405,3 +405,7 @@ INFO [2024-05-09 14:37:01,377] [none] django.utils.autoreload: C:\Users\8613
INFO [2024-05-09 14:37:01,401] [none] django.utils.autoreload: C:\Users\86135\Desktop\EasyPost\backend\api\dao\__init__.py changed, reloading.
INFO [2024-05-09 14:37:02,416] [none] django.utils.autoreload: Watching for file changes with StatReloader
INFO [2024-05-09 14:37:02,432] [none] django.utils.autoreload: Watching for file changes with StatReloader
+INFO [2024-05-11 14:56:27,760] [none] django.utils.autoreload: Watching for file changes with StatReloader
+WARNING [2024-05-11 16:54:24,907] [45d4088615764b4aad519b1122016210] django.request: Not Found: /media/avatar/default.png
+WARNING [2024-05-11 16:54:33,778] [d456106dae004bcaa6850b67916c0bf6] django.request: Not Found: /media/avatar/default.png
+WARNING [2024-05-11 16:54:42,682] [d81e1ffe960940aebe50293cb2ffe667] django.request: Not Found: /media/avatar/default.png
diff --git a/web/src/routers/index.ts b/web/src/routers/index.ts
index f950e692..8343a385 100644
--- a/web/src/routers/index.ts
+++ b/web/src/routers/index.ts
@@ -60,7 +60,6 @@ export const dynamicRoutes: Array = [
},
]
-
/**
* notFoundRouter(找不到路由)
*/
@@ -89,7 +88,6 @@ export const staticRoutes: Array = [
},
]
-
export const constantRoutes = [
...dynamicRoutes,
...staticRoutes
diff --git a/web/src/routers/modules/other.ts b/web/src/routers/modules/other.ts
index 5f151d1e..cc3cfcb8 100644
--- a/web/src/routers/modules/other.ts
+++ b/web/src/routers/modules/other.ts
@@ -15,7 +15,7 @@ const othersRouter = [{
children: [
{
path: '/other/clipboard',
- component: "other/clipboard/index.vue",
+ component: "/other/clipboard/index.vue",
name: 'clipboard',
meta: { title: '剪贴板', roles:['other'] ,icon: 'MenuIcon',}
},
diff --git a/web/src/store/modules/permission.ts b/web/src/store/modules/permission.ts
index 38819be7..bf081ceb 100644
--- a/web/src/store/modules/permission.ts
+++ b/web/src/store/modules/permission.ts
@@ -1,6 +1,6 @@
import {defineStore} from 'pinia'
import { asyncRoutes, constantRoutes, notFoundRouter } from "@/routers"
-import {hasPermission,filterAsyncRoutes} from "@/utils/routers"
+import { hasPermission, filterAsyncRoutes, dynamicImport, dynamicComponent } from "@/utils/routers";
import {filterKeepAlive} from "@/utils/routers";
export const usePermissionStore = defineStore({
// id: 必须的，在所有 Store 中唯一
@@ -22,18 +22,21 @@ export const usePermissionStore = defineStore({
return filterKeepAlive(asyncRoutes)
}
},
+
+
// 可以同步 也可以异步
actions:{
// 生成路由
generateRoutes(roles){
return new Promise(resolve => {
- // 在这判断是否有权限，哪些角色拥有哪些权限
let accessedRoutes
- if (roles&&roles.length&&!roles.includes('admin')) {
- accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
- } else {
- accessedRoutes = asyncRoutes || []
- }
+ accessedRoutes = dynamicComponent(asyncRoutes)
+ // 在这判断是否有权限，哪些角色拥有哪些权限
+ // if (roles&&roles.length&&!roles.includes('admin')) {
+ // accessedRoutes = filterAsyncRoutes(accessedRoutes, roles)
+ // } else {
+ // accessedRoutes = asyncRoutes || []
+ // }
accessedRoutes = accessedRoutes.concat(notFoundRouter)
this.routes = constantRoutes.concat(accessedRoutes)
this.addRoutes = accessedRoutes
diff --git a/web/src/store/modules/user.ts b/web/src/store/modules/user.ts
index 2a2b3645..5aedf9ab 100644
--- a/web/src/store/modules/user.ts
+++ b/web/src/store/modules/user.ts
@@ -35,7 +35,7 @@ export const useUserStore = defineStore({
getRoles() {
return new Promise((resolve, reject) => {
// 获取权限列表 默认就是超级管理员，因为没有进行接口请求 写死
- this.roles = ['other']
+ this.roles = ['admin']
localStorage.roles = JSON.stringify(this.roles)
resolve(this.roles)
})
diff --git a/web/src/utils/routers.ts b/web/src/utils/routers.ts
index 909eae88..128895b2 100644
--- a/web/src/utils/routers.ts
+++ b/web/src/utils/routers.ts
@@ -1,7 +1,9 @@
import path from "path-browserify";
-const modules = import.meta.glob('../../views/**/**.vue');
export const Layout = () => import('@/layout/index.vue');
+const layoutModules = import.meta.glob('/src/layout/*.{vue,tsx}');
+const viewsModules = import.meta.glob('/src/views/**/*.{vue,tsx}');
+const dynamicViewsModules = { ...layoutModules, ...viewsModules }; // Concise object spread
/**
@@ -68,3 +70,32 @@ export function handleRoutes(routers,pathUrl='') {
}
})
}
+
+export function dynamicImport(dynamicViewsModules, component) {
+ const keys = Object.keys(dynamicViewsModules);
+ const matchKeys = keys.filter((key) => {
+ const k = key.replace(/\/src\/views|../, '');
+ return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
+ });
+ if (matchKeys?.length === 1) {
+ const matchKey = matchKeys[0];
+ return dynamicViewsModules[matchKey];
+ }
+ if (matchKeys?.length > 1) {
+ return false;
+ }
+}
+
+export function dynamicComponent(asyncRoutes) {
+
+ return asyncRoutes.map(route => {
+ const tmp = { ...route, component: Layout }; // Combine component assignment
+ if (tmp.children) {
+ tmp.children = tmp.children.map(child => ({
+ ...child,
+ component: dynamicImport(dynamicViewsModules, child.component),
+ }));
+ }
+ return tmp;
+ });
+}