xto-fronted 0.3.6 → 0.3.7

package/src/router/guards.ts

@@ -0,0 +1,133 @@
+/**
+ * 路由守卫设置
+ */
+
+import type { Router } from 'vue-router'
+import { getToken } from '@/utils/auth'
+import { useUserStore } from '@/stores/user'
+import { useMenuStore } from '@/stores/menu'
+import { useAppStore } from '@/stores/app'
+import { getUserInfo } from '@/api/auth'
+import { getMenuTree } from '@/api/system'
+
+// 白名单路由
+const defaultWhiteList = ['/login', '/404', '/403']
+
+interface RouterGuardOptions {
+  // 白名单路由
+  whiteList?: string[]
+  // 登录页路径
+  loginPath?: string
+  // 首页路径
+  homePath?: string
+  // 获取用户信息的回调（可选，默认调用 API）
+  fetchUserInfo?: () => Promise<any>
+  // 获取菜单的回调（可选，默认调用 API）
+  fetchMenu?: () => Promise<any>
+  // 登录成功后的回调
+  onLoginSuccess?: () => void
+}
+
+/**
+ * 设置路由守卫
+ * @param router 路由实例
+ * @param options 配置选项
+ */
+export function setupRouterGuards(router: Router, options: RouterGuardOptions = {}) {
+  const whiteList = options.whiteList || defaultWhiteList
+  const loginPath = options.loginPath || '/login'
+  const homePath = options.homePath || '/'
+
+  router.beforeEach(async (to, _from, next) => {
+    // 启动进度条（可选）
+    // NProgress.start()
+
+    const appStore = useAppStore()
+    const userStore = useUserStore()
+    const menuStore = useMenuStore()
+
+    // 初始化主题
+    appStore.initTheme()
+
+    // 检查是否有 token
+    const token = getToken()
+
+    if (token) {
+      // 已登录
+      if (to.path === loginPath) {
+        // 已登录访问登录页，跳转到首页
+        next({ path: homePath })
+        // NProgress.done()
+      } else {
+        // 检查是否已获取用户信息
+        if (userStore.isLoggedIn) {
+          // 已有用户信息，直接放行
+          // 添加缓存页面
+          if (to.name && to.meta.keepAlive) {
+            appStore.addCachedView(to.name as string)
+          }
+          next()
+        } else {
+          // 尝试获取用户信息
+          try {
+            // 获取用户信息
+            if (options.fetchUserInfo) {
+              const userInfo = await options.fetchUserInfo()
+              userStore.setUserInfo(userInfo)
+            } else {
+              const userInfo = await getUserInfo()
+              userStore.setUserInfo(userInfo)
+            }
+
+            // 获取菜单
+            if (options.fetchMenu) {
+              const menuList = await options.fetchMenu()
+              menuStore.setMenuList(menuList)
+            } else {
+              const menuList = await getMenuTree()
+              menuStore.setMenuList(menuList)
+            }
+
+            // 登录成功回调
+            if (options.onLoginSuccess) {
+              options.onLoginSuccess()
+            }
+
+            // 添加缓存页面
+            if (to.name && to.meta.keepAlive) {
+              appStore.addCachedView(to.name as string)
+            }
+
+            // 重新导航到目标路由，确保动态路由已添加
+            next({ ...to, replace: true })
+          } catch (error) {
+            // 获取用户信息失败，清除 token 并跳转到登录页
+            console.error('获取用户信息失败:', error)
+            userStore.clearUserInfo()
+            menuStore.clearMenu()
+            // 清除 token
+            localStorage.removeItem('token')
+            localStorage.removeItem('refreshToken')
+            next({ path: loginPath, query: { redirect: to.fullPath } })
+            // NProgress.done()
+          }
+        }
+      }
+    } else {
+      // 未登录
+      if (whiteList.includes(to.path)) {
+        // 在白名单中，直接放行
+        next()
+      } else {
+        // 不在白名单中，跳转到登录页
+        next({ path: loginPath, query: { redirect: to.fullPath } })
+        // NProgress.done()
+      }
+    }
+  })
+
+  router.afterEach(() => {
+    // 结束进度条
+    // NProgress.done()
+  })
+}