"Refactor code for dynamic component loading

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

web/src/routers/index.ts

@@ -60,7 +60,6 @@ export const dynamicRoutes: Array<RouteRecordRaw & extendRoute> = [
   },
 ]
 
-
 /**
  * notFoundRouter(找不到路由)
  */
@@ -89,7 +88,6 @@ export const staticRoutes: Array<RouteRecordRaw & extendRoute> = [
   },
 ]
 
-
 export const constantRoutes = [
   ...dynamicRoutes,
   ...staticRoutes

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',}
     },

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

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)
             })

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;
+    });
+}