first commit

src/router/asyncModules.ts

@@ -0,0 +1,13 @@
+type ImportVueFileType = typeof import('*.vue')
+type ImportVueFileFnType = () => Promise<ImportVueFileType>
+
+const moduleFiles = import.meta.glob<ImportVueFileType>('@/views/**/*.vue')
+
+export const asyncRouteModules = Object.entries(moduleFiles).reduce((routes, [url, importFn]) => {
+  if (!/\/(views\/login|components)\//.test(url)) {
+    const path = url.replace('/src/views/', '').replace('.vue', '')
+    routes[path] = importFn
+  }
+
+  return routes
+}, {} as Recordable<ImportVueFileFnType>)

src/router/guard.ts

@@ -0,0 +1,144 @@
+import { Button, Message, Notification, Space } from '@arco-design/web-vue'
+import NProgress from 'nprogress'
+import type { Router } from 'vue-router'
+import { useRouteStore, useUserStore } from '@/stores'
+import { getToken } from '@/utils/auth'
+import { isHttp } from '@/utils/validate'
+import 'nprogress/nprogress.css'
+
+NProgress.configure({
+  easing: 'ease', // 动画方式
+  speed: 500, // 递增进度条的速度
+  showSpinner: false, // 是否显示圆圈加载
+  trickleSpeed: 200, // 自动递增间隔
+  minimum: 0.3, // 初始化时的最小百分比
+})
+
+// 版本更新
+let versionTag: string | null = null // 版本标识
+// 更新
+const onUpdateSystem = (id: string) => {
+  Notification.remove(id)
+  window.location.reload()
+}
+// 关闭更新弹窗
+const onCloseUpdateSystem = (id: string) => {
+  Notification.remove(id)
+}
+// 提示用户更新弹窗
+const handleNotification = () => {
+  const id = `updateModel`
+  Notification.info({
+    id,
+    title: '新版本更新',
+    content: '当前系统检测到有新的版本，请及时更新',
+    duration: 0,
+    closable: true,
+    position: 'bottomRight',
+    footer: () => {
+      return h(Space, {}, () => [h(Button, {
+        type: 'primary',
+        onClick: () => onUpdateSystem(id),
+      }, '更新'), h(Button, { type: 'secondary', onClick: () => onCloseUpdateSystem(id) }, '关闭')])
+    },
+  })
+}
+
+/**
+ * 获取首页的 ETag 或 Last-Modified 值，作为当前版本标识
+ * @returns {Promise<string|null>} 返回 ETag 或 Last-Modified 值
+ */
+const getVersionTag = async () => {
+  const response = await fetch('/', {
+    cache: 'no-cache',
+  })
+  return response.headers.get('etag') || response.headers.get('last-modified')
+}
+
+/**
+ * 比较当前的 ETag 或 Last-Modified 值与最新获取的值
+ */
+const compareTag = async () => {
+  const newVersionTag = await getVersionTag()
+  if (versionTag === null) {
+    versionTag = newVersionTag
+  } else if (versionTag !== newVersionTag) {
+    // 如果 ETag 或 Last-Modified 发生变化，则认为有更新
+    // 提示用户更新
+    handleNotification()
+  }
+}
+
+/** 免登录白名单 */
+const whiteList = ['/login', '/social/callback', '/pwdExpired']
+
+/** 是否已经生成过路由表 */
+let hasRouteFlag = false
+export const resetHasRouteFlag = () => {
+  hasRouteFlag = false
+}
+
+/** 初始化路由守卫 */
+export const setupRouterGuard = (router: Router) => {
+  router.beforeEach(async (to, from, next) => {
+    NProgress.start()
+    const userStore = useUserStore()
+    const routeStore = useRouteStore()
+    // 判断该用户是否登录
+    if (getToken()) {
+      if (to.path === '/login') {
+        // 如果已经登录，并准备进入 Login 页面，则重定向到主页
+        next()
+      } else {
+        if (!hasRouteFlag) {
+          try {
+            await userStore.getInfo()
+            if (userStore.userInfo.pwdExpired && to.path !== '/pwdExpired') {
+              Message.warning('密码已过期，请修改密码')
+              next('/pwdExpired')
+            }
+            const accessRoutes = await routeStore.generateRoutes()
+            accessRoutes.forEach((route) => {
+              if (!isHttp(route.path)) {
+                router.addRoute(route) // 动态添加可访问路由表
+              }
+            })
+            hasRouteFlag = true
+            // 确保添加路由已完成
+            // 设置 replace: true, 因此导航将不会留下历史记录
+            next({ ...to, replace: true })
+          } catch (error: any) {
+            // 过程中发生任何错误，都直接重置 Token，并重定向到登录页面
+            await userStore.logoutCallBack()
+            next(`/login?redirect=${to.path}`)
+          }
+        } else {
+          next()
+        }
+      }
+    } else {
+      // 如果没有 Token
+      if (whiteList.includes(to.path)) {
+        // 如果在免登录的白名单中，则直接进入
+        next()
+      } else {
+        // 其他没有访问权限的页面将被重定向到登录页面
+        next('/login')
+      }
+    }
+
+    // 生产环境开启检测版本更新
+    const isProd = import.meta.env.PROD
+    if (isProd) {
+      await compareTag()
+    }
+  })
+
+  router.onError(() => {
+    NProgress.done()
+  })
+
+  router.afterEach(() => {
+    NProgress.done()
+  })
+}

src/router/index.ts

@@ -0,0 +1,33 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useRouteStore } from '@/stores'
+import { constantRoutes, systemRoutes } from '@/router/route'
+import { setupRouterGuard } from '@/router/guard'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [...constantRoutes, ...systemRoutes],
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})
+
+setupRouterGuard(router)
+
+/**
+ * @description 重置路由
+ * @description 注意：所有动态路由路由必须带有 name 属性，否则可能会不能完全重置干净
+ */
+export function resetRouter() {
+  try {
+    const routeStore = useRouteStore()
+    routeStore.asyncRoutes.forEach((route) => {
+      const { name } = route
+      if (name) {
+        router.hasRoute(name) && router.removeRoute(name)
+      }
+    })
+  } catch (error) {
+    // 强制刷新浏览器也行，只是交互体验不是很好
+    window.location.reload()
+  }
+}
+
+export default router

src/router/route.ts

@@ -0,0 +1,90 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+/** 默认布局 */
+const Layout = () => import('@/layout/index.vue')
+
+/** 系统路由 */
+export const systemRoutes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/login/index.vue'),
+    meta: { hidden: true },
+  },
+  {
+    path: '/',
+    name: 'Dashboard',
+    component: Layout,
+    redirect: '/dashboard/analysis', // 改为跳转到分析页
+    meta: { title: '仪表盘', icon: 'dashboard', hidden: false },
+    children: [
+      {
+        path: '/dashboard/workplace',
+        name: 'Workplace',
+        component: () => import('@/views/dashboard/workplace/index.vue'),
+        meta: { title: '工作台', icon: 'desktop', hidden: true }, // 改为隐藏
+      },
+      {
+        path: '/dashboard/analysis',
+        name: 'Analysis',
+        component: () => import('@/views/dashboard/analysis/index.vue'),
+        meta: { title: '分析页', icon: 'insert-chart', hidden: false, affix: true },
+      },
+    ],
+  },
+  {
+    path: '/social/callback',
+    component: () => import('@/views/login/social/index.vue'),
+    meta: { hidden: true },
+  },
+  {
+    path: '/pwdExpired',
+    component: () => import('@/views/login/pwdExpired/index.vue'),
+    meta: { hidden: true },
+  },
+  {
+    path: '/setting',
+    name: 'Setting',
+    component: Layout,
+    meta: { hidden: true },
+    children: [
+      {
+        path: '/setting/profile',
+        name: 'SettingProfile',
+        component: () => import('@/views/setting/profile/index.vue'),
+        meta: { title: '个人中心', showInTabs: false },
+      },
+      {
+        path: '/setting/message',
+        name: 'SettingMessage',
+        component: () => import('@/views/setting/message/index.vue'),
+        meta: { title: '消息中心', showInTabs: false },
+      },
+    ],
+  },
+]
+
+// 固定路由（默认路由）
+export const constantRoutes: RouteRecordRaw[] = [
+  {
+    path: '/redirect',
+    component: Layout,
+    meta: { hidden: true },
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        component: () => import('@/views/default/redirect/index.vue'),
+      },
+    ],
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/views/default/error/404.vue'),
+    meta: { hidden: true },
+  },
+  {
+    path: '/403',
+    component: () => import('@/views/default/error/403.vue'),
+    meta: { hidden: true },
+  },
+]