3

src/router/index.ts

@@ -242,5 +242,19 @@ const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes,
 });
-
+// ====== 添加全局前置守卫 ======
+router.beforeEach((to, from, next) => {
+  const token = localStorage.getItem("token"); // 或从 pinia/vuex 获取
+  const isLoginPage = to.path === "/login";
+  if (!token && !isLoginPage) {
+    // 没有 token 且不是去登录页 → 跳转登录
+    next({ path: "/login" });
+  } else if (token && isLoginPage) {
+    // 已登录却访问登录页 → 跳转首页（可选）
+    next({ path: "/layout/home" });
+  } else {
+    // 正常访问
+    next();
+  }
+});
 export default router;

src/utils/index.ts

@@ -32,6 +32,7 @@ request.interceptors.request.use(
 // 响应拦截器（统一处理错误、code 等）
 request.interceptors.response.use(
   (response) => {
+    console.log('响应数据:', response);
     // 假设后端返回格式为 { code: 200, data: ..., message: '' }
     const { code, data, message } = response.data;
     console.log('请求成功:', data);
@@ -44,8 +45,8 @@ request.interceptors.response.use(
   },
   (error) => {
     // 网络错误 or 超时等
-    console.error('请求异常:', error.message);
+    console.error('请求异常:', error.response.data);
-    return Promise.reject(error);
+    return Promise.reject(error.response.data);
   }
 );
 

src/views/login/component/account.vue

@@ -4,13 +4,10 @@
     <a-form-item label="账号" name="phone" :rules="[{ required: true, message: '请输入用户名！' }]">
       <a-input v-model:value="formState.phone" />
     </a-form-item>
-
     <!-- 手动控制密码字段的错误状态 -->
-    <a-form-item label="密码" name="code" :validate-status="codeValidateStatus" :help="codeHelp"
+    <a-form-item label="密码" name="code" :help="codeHelp" :rules="[{ required: true, message: '请输入密码！' }]">
-      :rules="[{ required: true, message: '请输入密码！' }]">
       <a-input-password v-model:value="formState.code" />
     </a-form-item>
-
     <a-form-item>
       <a-button type="primary" html-type="submit" block class="login-form-button">
         登 录
@@ -23,7 +20,7 @@
 import { reactive, ref, shallowRef } from 'vue';
 import { useRouter } from 'vue-router';
 import { login } from '@/apis/login';
-import type { FormInstance } from 'ant-design-vue';
+import { message, type FormInstance } from 'ant-design-vue';
 
 const router = useRouter();
 const formRef = ref<FormInstance>();
@@ -60,23 +57,23 @@ const onFinish = async (values: FormState) => {
     ...values,
     login_method: 'SMS'
   };
-
+  formRef.value?.validateFields().then(async () => {
     try {
       const res: any = await login(loginData);
       console.log('登录请求成功:', res);
       // 登录成功后，将token存入localStorage
       const token = res?.access_token;
-
       if (!token) {
         throw new Error('登录失败：未返回有效凭证');
       }
-
       localStorage.setItem('token', token);
       router.push('/layout/home');
     } catch (error: any) {
       console.error('登录请求失败:', error);
-    setCodeError(error.message || '用户名或密码错误');
+      message.error(error || '用户名或密码错误');
     }
+  });
+
 };
 
 const onFinishFailed = (errorInfo: any) => {

src/views/login/index.vue

@@ -7,7 +7,7 @@
       <div class="login-content-main">
         <h4 class="login-content-title">GPU算力管理平台</h4>
         <div>
-          <a-tabs v-model:activeKey="state.tabsActiveName">
+          <a-tabs v-model:activeKey="state.tabsActiveName" size="large">
             <a-tab-pane key="account" tab="登录">
               <Account />
             </a-tab-pane>