Initial commit

src/router/index.ts

@@ -0,0 +1,63 @@
+/**
+ * 路由配置
+ */
+import NProgress from 'nprogress';
+import type { _RouteLocationBase } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
+import { WHITE_LIST, REDIRECT_PATH, LAYOUT_PATH } from '@/config/setting';
+import { useUserStore } from '@/store/modules/user';
+import { getToken } from '@/utils/token-util';
+import { routes, getMenuRoutes } from './routes';
+
+NProgress.configure({
+  speed: 200,
+  minimum: 0.02,
+  trickleSpeed: 200,
+  showSpinner: false
+});
+
+const router = createRouter({
+  routes,
+  history: createWebHistory(),
+  scrollBehavior() {
+    return { top: 0 };
+  }
+});
+
+/**
+ * 路由守卫
+ */
+router.beforeEach(async (to, from) => {
+  if (!from.path.includes(REDIRECT_PATH)) {
+    NProgress.start();
+  }
+  if (!getToken()) {
+    // 未登录跳转登录界面
+    if (!WHITE_LIST.includes(to.path)) {
+      return {
+        path: '/login',
+        query: to.path === LAYOUT_PATH ? {} : { from: to.path }
+      };
+    }
+    return;
+  }
+  // 注册动态路由
+  const userStore = useUserStore();
+  if (!userStore.menus) {
+    const { menus, homePath } = await userStore.fetchUserInfo();
+    if (menus) {
+      router.addRoute(getMenuRoutes(menus, homePath));
+      return { ...to, replace: true };
+    }
+  }
+});
+
+router.afterEach((to) => {
+  if (!to.path.includes(REDIRECT_PATH) && NProgress.isStarted()) {
+    setTimeout(() => {
+      NProgress.done(true);
+    }, 200);
+  }
+});
+
+export default router;

src/router/routes.ts

@@ -0,0 +1,84 @@
+import type { RouteRecordRaw } from 'vue-router';
+import type { MenuItemType } from 'ele-admin-pro/es';
+import { menuToRoutes, eachTreeData } from 'ele-admin-pro/es';
+import { HOME_PATH, LAYOUT_PATH, REDIRECT_PATH } from '@/config/setting';
+import EleLayout from '@/layout/index.vue';
+import RedirectLayout from '@/components/RedirectLayout';
+const modules = import.meta.glob('/src/views/**/index.vue');
+
+/**
+ * 静态路由
+ */
+export const routes = [
+  {
+    path: '/login',
+    component: () => import('@/views/passport/login/index.vue'),
+    meta: { title: '登录' }
+  },
+  {
+    path: '/forget',
+    component: () => import('@/views/passport/forget/index.vue'),
+    meta: { title: '忘记密码' }
+  },
+  {
+    path: '/wx-work-login',
+    component: () => import('@/views/passport/wx-work/index.vue'),
+    meta: { title: '企业微信登录' }
+  },
+  {
+    path: '/common',
+    component: EleLayout,
+    children: [
+      {
+        path: '/common/iframe',
+        component: () => import('@/views/iframe/index.vue'),
+        meta: { title: 'iframe', tabUnique: false }
+      }
+    ]
+  },
+  // 404
+  {
+    path: '/:path(.*)*',
+    component: () => import('@/views/exception/404/index.vue')
+  }
+];
+
+/**
+ * 动态路由
+ * @param menus 菜单数据
+ * @param homePath 主页地址
+ */
+export function getMenuRoutes(menus?: MenuItemType[], homePath?: string) {
+  const routes: RouteRecordRaw[] = [
+    // 用于刷新的路由
+    {
+      path: REDIRECT_PATH + '/:path(.*)',
+      component: RedirectLayout,
+      meta: { hideFooter: true }
+    }
+  ];
+  // 路由铺平处理
+  eachTreeData(menuToRoutes(menus, getComponent), (route) => {
+    routes.push(Object.assign({}, route, { children: void 0 }));
+  });
+  return {
+    path: LAYOUT_PATH,
+    component: EleLayout,
+    redirect: HOME_PATH ?? homePath,
+    children: routes
+  };
+}
+
+/**
+ * 解析路由组件
+ * @param component 组件名称
+ */
+function getComponent(component?: string) {
+  if (component) {
+    const module = modules[`/src/views/${component}.vue`];
+    if (!module) {
+      return modules[`/src/views/${component}/index.vue`];
+    }
+    return module;
+  }
+}