From 7c509fa7372de5bf60895bc5e5b66cc6355c8d97 Mon Sep 17 00:00:00 2001 From: Charles7c Date: Sun, 8 Dec 2024 19:56:35 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E8=B7=AF?= =?UTF-8?q?=E7=94=B1=E5=AE=88=E5=8D=AB=E4=BB=A3=E7=A0=81=EF=BC=88=E5=90=8C?= =?UTF-8?q?=E6=AD=A5=20GiDemo=20=E6=9B=B4=E6=96=B0=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.ts | 4 +- src/router/guard.ts | 120 +++++++++++++++++++++++--------------------- src/router/index.ts | 3 ++ 3 files changed, 68 insertions(+), 59 deletions(-) diff --git a/src/main.ts b/src/main.ts index 4eb0f14..4065dfe 100644 --- a/src/main.ts +++ b/src/main.ts @@ -9,8 +9,6 @@ import ArcoVueIcon from '@arco-design/web-vue/es/icon' import App from './App.vue' import router from './router' -import '@/router/guard' - // 使用动画库 import 'animate.css/animate.min.css' @@ -25,6 +23,8 @@ import 'virtual:svg-icons-register' // 自定义指令 import directives from './directives' + +// 状态管理 import pinia from '@/stores' // 对特定组件进行默认配置 diff --git a/src/router/guard.ts b/src/router/guard.ts index bd330bd..8464a85 100644 --- a/src/router/guard.ts +++ b/src/router/guard.ts @@ -1,6 +1,6 @@ import { Button, Message, Notification, Space } from '@arco-design/web-vue' import NProgress from 'nprogress' -import router from '@/router' +import type { Router } from 'vue-router' import { useRouteStore, useUserStore } from '@/stores' import { getToken } from '@/utils/auth' import { isHttp } from '@/utils/validate' @@ -36,7 +36,10 @@ const handleNotification = () => { closable: true, position: 'bottomRight', footer: () => { - return h(Space, {}, () => [h(Button, { type: 'primary', onClick: () => onUpdateSystem(id) }, '更新'), h(Button, { type: 'secondary', onClick: () => onCloseUpdateSystem(id) }, '关闭')]) + return h(Space, {}, () => [h(Button, { + type: 'primary', + onClick: () => onUpdateSystem(id), + }, '更新'), h(Button, { type: 'secondary', onClick: () => onCloseUpdateSystem(id) }, '关闭')]) }, }) } @@ -75,64 +78,67 @@ export const resetHasRouteFlag = () => { hasRouteFlag = false } -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 { +/** 初始化路由守卫 */ +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') } } - } else { - // 如果没有 Token - if (whiteList.includes(to.path)) { - // 如果在免登录的白名单中，则直接进入 - next() - } else { - // 其他没有访问权限的页面将被重定向到登录页面 - next('/login') + + // 生产环境开启检测版本更新 + const isProd = import.meta.env.PROD + if (isProd) { + await compareTag() } - } + }) - // 生产环境开启检测版本更新 - const isProd = import.meta.env.PROD - if (isProd) { - await compareTag() - } -}) + router.onError(() => { + NProgress.done() + }) -router.onError(() => { - NProgress.done() -}) - -router.afterEach(() => { - NProgress.done() -}) + router.afterEach(() => { + NProgress.done() + }) +} diff --git a/src/router/index.ts b/src/router/index.ts index 2755719..257c627 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,6 +1,7 @@ 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), @@ -8,6 +9,8 @@ const router = createRouter({ scrollBehavior: () => ({ left: 0, top: 0 }), }) +setupRouterGuard(router) + /** * @description 重置路由 * @description 注意：所有动态路由路由必须带有 name 属性，否则可能会不能完全重置干净