xto-fronted 0.3.6 → 0.3.8

package/src/index.ts

@@ -33,6 +33,7 @@ export { default as router, resetRouter } from './router'
 export * from './router/staticRoutes'
 export * from './router/dynamicRoutes'
 export { createLayoutRoute, createRouter } from './router/layoutRoute'
+export { setupRouterGuards } from './router/guards'
 
 // API
 export * from './api/auth'

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()
+  })
+}

package/src/views/login/index.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { Button } from '@xto/base'
 import { Form, FormItem, Input, Checkbox } from '@xto/form'
 import { Message } from '@xto/feedback'
-import { useAuthStore } from '@/stores/auth'
-import { useUserStore } from '@/stores/user'
-import { useMenuStore } from '@/stores/menu'
+import { login } from '@/api/auth'
+import { setTokenInfo } from '@/utils/auth'
 
 const router = useRouter()
-const authStore = useAuthStore()
-const userStore = useUserStore()
-const menuStore = useMenuStore()
+const route = useRoute()
 
 const loading = ref(false)
 const rememberMe = ref(false)
@@ -39,85 +36,25 @@ const handleLogin = async () => {
     await formRef.value?.validate()
     loading.value = true
 
-    // Mock 登录
-    setTimeout(() => {
-      // 设置 token
-      authStore.login({
-        token: 'mock_token_' + Date.now(),
-        refreshToken: 'mock_refresh_token',
-        expireTime: Date.now() + 7 * 24 * 60 * 60 * 1000
-      })
-
-      // 设置用户信息
-      userStore.setUserInfo({
-        id: 1,
-        username: formData.username,
-        nickname: '管理员',
-        avatar: '',
-        email: 'admin@example.com',
-        phone: '13800138000',
-        status: 1,
-        roles: ['admin'],
-        permissions: ['*'],
-        createTime: new Date().toISOString()
-      })
-
-      // 设置菜单
-      menuStore.setMenuList([
-        {
-          id: 1,
-          name: 'Dashboard',
-          path: '/dashboard',
-          component: 'dashboard/index',
-          icon: 'dashboard',
-          title: '仪表盘',
-          keepAlive: true,
-          affix: true
-        },
-        {
-          id: 2,
-          name: 'System',
-          path: '/system',
-          redirect: '/system/user',
-          icon: 'setting',
-          title: '系统管理',
-          children: [
-            {
-              id: 21,
-              name: 'SystemUser',
-              path: '/system/user',
-              component: 'system/user/index',
-              icon: 'user',
-              title: '用户管理',
-              keepAlive: true
-            },
-            {
-              id: 22,
-              name: 'SystemRole',
-              path: '/system/role',
-              component: 'system/role/index',
-              icon: 'role',
-              title: '角色管理',
-              keepAlive: true
-            },
-            {
-              id: 23,
-              name: 'SystemMenu',
-              path: '/system/menu',
-              component: 'system/menu/index',
-              icon: 'menu',
-              title: '菜单管理',
-              keepAlive: true
-            }
-          ]
-        }
-      ])
-
-      Message.success('登录成功')
-      router.push('/')
-      loading.value = false
-    }, 1000)
+    // 调用登录 API
+    const result = await login({
+      username: formData.username,
+      password: formData.password
+    })
+
+    // 保存 token
+    setTokenInfo(result)
+
+    Message.success('登录成功')
+
+    // 获取重定向地址
+    const redirect = route.query.redirect as string || '/'
+
+    // 跳转到目标页面（路由守卫会自动获取用户信息和菜单）
+    router.push(redirect)
   } catch (error) {
+    console.error('登录失败:', error)
+  } finally {
     loading.value = false
   }
 }
@@ -178,7 +115,7 @@ const handleLogin = async () => {
       </Form>
 
       <div class="login__footer">
-        <p>提示: 任意用户名密码即可登录 (Mock 模式)</p>
+        <p>默认账号: admin / 123456</p>
       </div>
     </div>
   </div>