登录界面已完成

src/router/index.js

@@ -0,0 +1,59 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: '/',
+            component: () => import('../layouts/MainLayout.vue'),
+            children: [
+                {
+                    path: '', // 默认访问 / 显示工单管理
+                    name: 'home',
+                    component: () => import('../views/TicketManagement.vue'),
+                    meta: { requiresAuth: true }
+                },
+                {
+                    path: 'stats', // 访问 /stats
+                    name: 'stats',
+                    component: () => import('../views/StatsView.vue'),
+                    meta: { requiresAuth: true }
+                }
+            ]
+        },
+        {
+            path: '/login',
+            name: 'login',
+            component: () => import('../views/LoginView.vue')    // 懒加载登录组件，
+        },
+    ]
+})
+
+
+// 全局前置守卫
+router.beforeEach((to, from, next) => {
+    // 1. 尝试从 localStorage 或 sessionStorage 获取 Token
+    const token = localStorage.getItem('token') || sessionStorage.getItem('token');
+
+    // 2. 判断目标路由是否需要登录权限
+    // matches 可以检查嵌套路由中父级或子级是否有 requiresAuth
+    const isRequiresAuth = to.matched.some(record => record.meta.requiresAuth);
+
+    if (isRequiresAuth && !token) {
+        // 3. 如果需要登录但没有 Token，强制拦截并跳转到登录页
+        // 顺便把当前想去的页面路径传给登录页，方便登录后跳回来（可选增强逻辑）
+        next({
+            name: 'login',
+            query: { redirect: to.fullPath }
+        });
+    } else if (to.name === 'login' && token) {
+
+        // 4. 如果用户已经登录了，还想手动输入 /login 去登录页，直接把他弹回首页
+        next({ name: 'home' });
+    } else {
+        // 5. 否则直接放行
+        next();
+    }
+});
+
+export default router