initHeader

frontend/src/routers/modules/dynamicRouter.ts

@@ -0,0 +1,54 @@
+import router from "@/routers/index";
+import { LOGIN_URL } from "@/config";
+import { RouteRecordRaw } from "vue-router";
+import { ElNotification } from "element-plus";
+import { useUserStore } from "@/stores/modules/user";
+import { useAuthStore } from "@/stores/modules/auth";
+
+// 引入 views 文件夹下所有 vue 文件
+const modules = import.meta.glob("@/views/**/*.vue");
+
+/**
+ * @description 初始化动态路由
+ */
+export const initDynamicRouter = async () => {
+  const userStore = useUserStore();
+  const authStore = useAuthStore();
+
+  try {
+    // 1.获取菜单列表 && 按钮权限列表
+    await authStore.getAuthMenuList();
+    await authStore.getAuthButtonList();
+
+    // 2.判断当前用户有没有菜单权限
+    if (!authStore.authMenuListGet.length) {
+      ElNotification({
+        title: "无权限访问",
+        message: "当前账号无任何菜单权限，请联系系统管理员！",
+        type: "warning",
+        duration: 3000
+      });
+      userStore.setToken("");
+      router.replace(LOGIN_URL);
+      return Promise.reject("No permission");
+    }
+
+    // 3.添加动态路由
+    authStore.flatMenuListGet.forEach(item => {
+      item.children && delete item.children;
+      if (item.component && typeof item.component == "string") {
+        item.component = modules["/src/views" + item.component + ".vue"];
+      }
+      if (item.meta.isFull) {
+        router.addRoute(item as unknown as RouteRecordRaw);
+      } else {
+        router.addRoute("layout", item as unknown as RouteRecordRaw);
+      }
+    });
+  } catch (error) {
+    // 当按钮 || 菜单请求出错时，重定向到登陆页
+    userStore.setToken("");
+    router.replace(LOGIN_URL);
+    return Promise.reject(error);
+  }
+};

frontend/src/routers/modules/staticRouter.ts

@@ -0,0 +1,63 @@
+import { RouteRecordRaw } from "vue-router";
+import { HOME_URL, LOGIN_URL } from "@/config";
+
+/**
+ * staticRouter (静态路由)
+ */
+export const staticRouter: RouteRecordRaw[] = [
+  {
+    path: "/",
+    redirect: HOME_URL
+  },
+  {
+    path: LOGIN_URL,
+    name: "login",
+    component: () => import("@/views/login/index.vue"),
+    meta: {
+      title: "登录"
+    }
+  },
+  {
+    path: "/layout",
+    name: "layout",
+    component: () => import("@/layouts/index.vue"),
+    // component: () => import("@/layouts/indexAsync.vue"),
+    redirect: HOME_URL,
+    children: []
+  }
+];
+
+/**
+ * errorRouter (错误页面路由)
+ */
+export const errorRouter = [
+  {
+    path: "/403",
+    name: "403",
+    component: () => import("@/components/ErrorMessage/403.vue"),
+    meta: {
+      title: "403页面"
+    }
+  },
+  {
+    path: "/404",
+    name: "404",
+    component: () => import("@/components/ErrorMessage/404.vue"),
+    meta: {
+      title: "404页面"
+    }
+  },
+  {
+    path: "/500",
+    name: "500",
+    component: () => import("@/components/ErrorMessage/500.vue"),
+    meta: {
+      title: "500页面"
+    }
+  },
+  // Resolve refresh page, route warnings
+  {
+    path: "/:pathMatch(.*)*",
+    component: () => import("@/components/ErrorMessage/404.vue")
+  }
+];