update

packages/frontend/src/router/index.ts

@@ -0,0 +1,61 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import { useAuthStore } from '../stores/auth.store'; // 导入 Auth Store
+
+// 路由配置
+const routes: Array<RouteRecordRaw> = [
+  // 首页/仪表盘 (占位符)
+  {
+    path: '/',
+    name: 'Dashboard',
+    // component: () => import('../views/DashboardView.vue') // 稍后创建
+    component: { template: '<div>仪表盘 (建设中)</div>' } // 临时占位
+  },
+  // 登录页面 (占位符)
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('../views/LoginView.vue') // 指向实际的登录组件
+  },
+  // 连接管理页面
+  {
+    path: '/connections',
+    name: 'Connections',
+    component: () => import('../views/ConnectionsView.vue')
+  },
+  // 工作区页面，需要 connectionId 参数
+  {
+    path: '/workspace/:connectionId', // 使用动态路由段
+    name: 'Workspace',
+    component: () => import('../views/WorkspaceView.vue'),
+    props: true // 将路由参数作为 props 传递给组件
+  },
+  // 其他路由...
+];
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL), // 使用 HTML5 History 模式
+  routes,
+});
+
+// 添加全局前置守卫
+router.beforeEach((to, from, next) => {
+  // 在守卫内部获取 store 实例，确保 Pinia 已初始化
+  const authStore = useAuthStore();
+
+  const requiresAuth = !['Login'].includes(to.name as string); // 需要认证的路由 (除了登录页)
+
+  if (requiresAuth && !authStore.isAuthenticated) {
+    // 如果需要认证但用户未登录，重定向到登录页
+    console.log('路由守卫：未登录，重定向到 /login');
+    next({ name: 'Login' });
+  } else if (to.name === 'Login' && authStore.isAuthenticated) {
+    // 如果用户已登录但尝试访问登录页，重定向到仪表盘
+    console.log('路由守卫：已登录，从 /login 重定向到 /');
+    next({ name: 'Dashboard' });
+  } else {
+    // 其他情况允许导航
+    next();
+  }
+});
+
+export default router;