feat: 模拟后台返回不同角色路由生成动态路由

src/router/index.ts

@@ -5,27 +5,53 @@ import flowChartRouter from "./modules/flowchart";
 import editorRouter from "./modules/editor";
 import componentsRouter from "./modules/components";
 import nestedRouter from "./modules/nested";
-import systemRouter from "./modules/system";
 import errorRouter from "./modules/error";
-import remainingRouter from "./modules/remaining";
+import permissionRouter from "./modules/permission";
+import remainingRouter from "./modules/remaining"; //静态路由
+import Layout from "/@/layout/index.vue";
 
+import { getAsyncRoutes } from "/@/api/routes";
 import { storageSession } from "../utils/storage";
 import { i18n } from "/@/plugins/i18n/index";
 
-const routes: Array<RouteRecordRaw> = [
+const constantRoutes: Array<RouteRecordRaw> = [
   homeRouter,
   flowChartRouter,
   editorRouter,
   componentsRouter,
   nestedRouter,
-  systemRouter,
+  permissionRouter,
   errorRouter,
-  ...remainingRouter,
 ];
 
+// 过滤后端传来的动态路由重新生成规范路由
+const addAsyncRoutes = (arrRoutes: Array<string>) => {
+  if (!arrRoutes || !arrRoutes.length) return;
+  arrRoutes.forEach((v: any) => {
+    if (v.redirect) {
+      v.component = Layout;
+    } else {
+      // https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
+      v.component = () =>
+        import(/* @vite-ignore */ `/@/views${v.path}/index.vue`);
+    }
+    if (v.children) {
+      addAsyncRoutes(v.children);
+    }
+  });
+  return arrRoutes;
+};
+
+// 按照路由中meta下的rank等级升序来排序路由
+function ascending(arr) {
+  return arr.sort((a: any, b: any) => {
+    return a?.meta?.rank - b?.meta?.rank;
+  });
+}
+
 const router = createRouter({
   history: createWebHashHistory(),
-  routes,
+  routes: ascending(constantRoutes).concat(...remainingRouter),
   scrollBehavior(to, from, savedPosition) {
     return new Promise((resolve, reject) => {
       if (savedPosition) {
@@ -46,13 +72,31 @@ import NProgress from "../utils/progress";
 const whiteList = ["/login", "/register"];
 
 router.beforeEach((to, _from, next) => {
+  let isLogin = storageSession.getItem("info");
+  // _from?.name;
+  if (isLogin && isLogin.username === "admin") {
+    // 异步路由
+    getAsyncRoutes().then(({ info }) => {
+      addAsyncRoutes([info]).forEach((v: any) => {
+        // 防止重复添加路由
+        if (
+          router.options.routes.findIndex((value) => value.path === v.path) !==
+          -1
+        )
+          return;
+        // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
+        router.options.routes.push(v);
+        // 最终路由进行升序
+        ascending(router.options.routes);
+        router.addRoute(v.name, v);
+      });
+    });
+  }
   NProgress.start();
   const { t } = i18n.global;
   // @ts-ignore
   to.meta.title ? (document.title = t(to.meta.title)) : ""; // 动态title
-  whiteList.indexOf(to.path) !== -1 || storageSession.getItem("info")
-    ? next()
-    : next("/login"); // 全部重定向到登录页
+  whiteList.indexOf(to.path) !== -1 || isLogin ? next() : next("/login"); // 全部重定向到登录页
 });
 
 router.afterEach(() => {

src/router/modules/components.ts

@@ -5,9 +5,17 @@ const componentsRouter = {
   name: "components",
   component: Layout,
   redirect: "/components/split-pane",
+  meta: {
+    icon: "el-icon-menu",
+    title: "message.hscomponents",
+    showLink: true,
+    savedPosition: true,
+    rank: 4,
+  },
   children: [
     {
       path: "/components/video",
+      name: "video",
       component: () => import("/@/views/components/video/index.vue"),
       meta: {
         title: "message.hsvideo",
@@ -17,6 +25,7 @@ const componentsRouter = {
     },
     {
       path: "/components/map",
+      name: "map",
       component: () => import("/@/views/components/map/index.vue"),
       meta: {
         title: "message.hsmap",
@@ -26,6 +35,7 @@ const componentsRouter = {
     },
     {
       path: "/components/draggable",
+      name: "draggable",
       component: () => import("/@/views/components/draggable/index.vue"),
       meta: {
         title: "message.hsdraggable",
@@ -33,8 +43,10 @@ const componentsRouter = {
         savedPosition: true,
       },
     },
+
     {
-      path: "/components/split-pane",
+      path: "/components/splitPane",
+      name: "splitPane",
       component: () => import("/@/views/components/split-pane/index.vue"),
       meta: {
         title: "message.hssplitPane",
@@ -44,6 +56,7 @@ const componentsRouter = {
     },
     {
       path: "/components/button",
+      name: "button",
       component: () => import("/@/views/components/button/index.vue"),
       meta: {
         title: "message.hsbutton",
@@ -53,6 +66,7 @@ const componentsRouter = {
     },
     {
       path: "/components/cropping",
+      name: "cropping",
       component: () => import("/@/views/components/cropping/index.vue"),
       meta: {
         title: "message.hscropping",
@@ -62,6 +76,7 @@ const componentsRouter = {
     },
     {
       path: "/components/countTo",
+      name: "countTo",
       component: () => import("/@/views/components/count-to/index.vue"),
       meta: {
         title: "message.hscountTo",
@@ -71,6 +86,7 @@ const componentsRouter = {
     },
     {
       path: "/components/selector",
+      name: "selector",
       component: () => import("/@/views/components/selector/index.vue"),
       meta: {
         title: "message.hsselector",
@@ -80,6 +96,7 @@ const componentsRouter = {
     },
     {
       path: "/components/seamlessScroll",
+      name: "seamlessScroll",
       component: () => import("/@/views/components/seamless-scroll/index.vue"),
       meta: {
         title: "message.hsseamless",
@@ -89,6 +106,7 @@ const componentsRouter = {
     },
     {
       path: "/components/contextmenu",
+      name: "contextmenu",
       component: () => import("/@/views/components/contextmenu/index.vue"),
       meta: {
         title: "message.hscontextmenu",
@@ -97,12 +115,6 @@ const componentsRouter = {
       },
     },
   ],
-  meta: {
-    icon: "el-icon-menu",
-    title: "message.hscomponents",
-    showLink: true,
-    savedPosition: true,
-  },
 };
 
 export default componentsRouter;

src/router/modules/editor.ts

@@ -5,9 +5,17 @@ const editorRouter = {
   name: "editor",
   component: Layout,
   redirect: "/editor/index",
+  meta: {
+    icon: "el-icon-edit-outline",
+    title: "message.hseditor",
+    showLink: true,
+    savedPosition: true,
+    rank: 2,
+  },
   children: [
     {
       path: "/editor/index",
+      name: "editor",
       component: () => import("/@/views/editor/index.vue"),
       meta: {
         title: "message.hseditor",
@@ -16,12 +24,6 @@ const editorRouter = {
       },
     },
   ],
-  meta: {
-    icon: "el-icon-edit-outline",
-    title: "message.hseditor",
-    showLink: true,
-    savedPosition: true,
-  },
 };
 
 export default editorRouter;

src/router/modules/error.ts

@@ -5,9 +5,17 @@ const errorRouter = {
   name: "error",
   component: Layout,
   redirect: "/error/401",
+  meta: {
+    icon: "el-icon-position",
+    title: "message.hserror",
+    showLink: true,
+    savedPosition: true,
+    rank: 7,
+  },
   children: [
     {
       path: "/error/401",
+      name: "401",
       component: () => import("/@/views/error/401.vue"),
       meta: {
         title: "message.hsfourZeroOne",
@@ -17,6 +25,7 @@ const errorRouter = {
     },
     {
       path: "/error/404",
+      name: "404",
       component: () => import("/@/views/error/404.vue"),
       meta: {
         title: "message.hsfourZeroFour",
@@ -25,12 +34,6 @@ const errorRouter = {
       },
     },
   ],
-  meta: {
-    icon: "el-icon-position",
-    title: "message.hserror",
-    showLink: true,
-    savedPosition: true,
-  },
 };
 
 export default errorRouter;

src/router/modules/flowchart.ts

@@ -5,9 +5,17 @@ const flowChartRouter = {
   name: "flowChart",
   component: Layout,
   redirect: "/flowChart/index",
+  meta: {
+    icon: "el-icon-set-up",
+    title: "message.hsflowChart",
+    showLink: true,
+    savedPosition: true,
+    rank: 1,
+  },
   children: [
     {
       path: "/flowChart/index",
+      name: "flowChart",
       component: () => import("/@/views/flow-chart/index.vue"),
       meta: {
         title: "message.hsflowChart",
@@ -16,12 +24,6 @@ const flowChartRouter = {
       },
     },
   ],
-  meta: {
-    icon: "el-icon-set-up",
-    title: "message.hsflowChart",
-    showLink: true,
-    savedPosition: true,
-  },
 };
 
 export default flowChartRouter;

src/router/modules/home.ts

@@ -5,6 +5,12 @@ const homeRouter = {
   name: "home",
   component: Layout,
   redirect: "/welcome",
+  meta: {
+    icon: "el-icon-s-home",
+    showLink: true,
+    savedPosition: false,
+    rank: 0,
+  },
   children: [
     {
       path: "/welcome",
@@ -17,11 +23,6 @@ const homeRouter = {
       },
     },
   ],
-  meta: {
-    icon: "el-icon-s-home",
-    showLink: true,
-    savedPosition: false,
-  },
 };
 
 export default homeRouter;

src/router/modules/nested.ts

@@ -10,6 +10,7 @@ const nestedRouter = {
     icon: "el-icon-s-data",
     showLink: true,
     savedPosition: false,
+    rank: 5,
   },
   children: [
     {

src/router/modules/permission.ts

@@ -0,0 +1,39 @@
+import Layout from "/@/layout/index.vue";
+
+const permissionRouter = {
+  path: "/permission",
+  component: Layout,
+  redirect: "/permission/page",
+  name: "permission",
+  meta: {
+    title: "message.permission",
+    icon: "el-icon-lollipop",
+    showLink: true,
+    savedPosition: false,
+    rank: 3,
+  },
+  children: [
+    {
+      path: "/permission/page",
+      component: () => import("/@/views/permission/page.vue"),
+      name: "permissionPage",
+      meta: {
+        title: "message.permissionPage",
+        showLink: true,
+        savedPosition: false,
+      },
+    },
+    {
+      path: "/permission/button",
+      component: () => import("/@/views/permission/button.vue"),
+      name: "permissionButton",
+      meta: {
+        title: "message.permissionButton",
+        showLink: true,
+        savedPosition: false,
+      },
+    },
+  ],
+};
+
+export default permissionRouter;

src/router/modules/remaining.ts

@@ -8,6 +8,7 @@ const remainingRouter = [
     meta: {
       title: "message.hslogin",
       showLink: false,
+      rank: 101,
     },
   },
   {
@@ -17,11 +18,13 @@ const remainingRouter = [
     meta: {
       title: "message.hsregister",
       showLink: false,
+      rank: 102,
     },
   },
   {
     // 找不到路由重定向到404页面
     path: "/:pathMatch(.*)",
+    name: "pathMatch",
     component: Layout,
     redirect: "/error/404",
     meta: {
@@ -29,14 +32,24 @@ const remainingRouter = [
       title: "message.hshome",
       showLink: false,
       savedPosition: false,
+      rank: 103,
     },
   },
   {
     path: "/redirect",
+    name: "redirect",
     component: Layout,
+    meta: {
+      icon: "el-icon-s-home",
+      title: "message.hshome",
+      showLink: false,
+      savedPosition: false,
+      rank: 104,
+    },
     children: [
       {
         path: "/redirect/:path(.*)",
+        name: "redirect",
         component: () => import("/@/views/redirect.vue"),
       },
     ],

src/router/modules/system.ts

@@ -1,36 +0,0 @@
-import Layout from "/@/layout/index.vue";
-
-const systemRouter = {
-  path: "/system",
-  name: "system",
-  component: Layout,
-  redirect: "/system/base",
-  children: [
-    {
-      path: "/system/base",
-      component: () => import("/@/views/system/user.vue"),
-      meta: {
-        title: "message.hsBaseinfo",
-        showLink: false,
-        savedPosition: true,
-      },
-    },
-    {
-      path: "/system/dict",
-      component: () => import("/@/views/system/dict/index.vue"),
-      meta: {
-        title: "message.hsDict",
-        showLink: false,
-        savedPosition: true,
-      },
-    },
-  ],
-  meta: {
-    icon: "el-icon-setting",
-    title: "message.hssysManagement",
-    showLink: true,
-    savedPosition: true,
-  },
-};
-
-export default systemRouter;