From 4e8aa15b71a23cc0e984eb26b30e155d3dbcfb4e Mon Sep 17 00:00:00 2001
From: cat-shark <1716967236@qq.com>
Date: Wed, 5 Aug 2026 21:45:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=80=80=E5=87=BA=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E8=A1=A5=E9=98=B2=E6=8A=96=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__tests__/components/MyHead.spec.ts | 21 +++++++++++++++++++++
 src/components/MyHead.vue               | 19 +++++++++++++------
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/__tests__/components/MyHead.spec.ts b/src/__tests__/components/MyHead.spec.ts
index addd933..50d6649 100644
--- a/src/__tests__/components/MyHead.spec.ts
+++ b/src/__tests__/components/MyHead.spec.ts
@@ -69,4 +69,25 @@ describe('MyHead.vue', () => {
     expect(ElMessage.success).toHaveBeenCalledWith('已退出登录')
     expect(router.currentRoute.value.path).toBe('/login')
   })
+
+  it('prevents repeated logout while request is pending', async () => {
+    let resolveLogout!: (value: any) => void
+    vi.mocked(logout).mockImplementation(
+      () => new Promise((resolve) => { resolveLogout = resolve }),
+    )
+    localStorage.setItem('isLoggedIn', 'true')
+    const wrapper = await mountAt('/study')
+
+    const first = wrapper.vm.handleLogout()
+    const second = wrapper.vm.handleLogout()
+    await Promise.resolve()
+
+    expect(logout).toHaveBeenCalledTimes(1)
+    expect(wrapper.vm.loggingOut).toBe(true)
+
+    resolveLogout({ code: 200 })
+    await Promise.all([first, second])
+
+    expect(wrapper.vm.loggingOut).toBe(false)
+  })
 })
diff --git a/src/components/MyHead.vue b/src/components/MyHead.vue
index 2fc9d88..c6e2802 100644
--- a/src/components/MyHead.vue
+++ b/src/components/MyHead.vue
@@ -20,6 +20,7 @@
       type="success"
       plain
       class="logout-btn"
+      :loading="loggingOut"
       @click="handleLogout"
     >
       退出登录
@@ -28,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 import router from "@/router";
@@ -38,20 +39,26 @@ const route = useRoute();
 const isLoginRoute = computed(() => route.path === "/login");
 const showBackButton = computed(() => route.path !== "/login" && route.path !== "/welcome");
 const pageTitle = computed(() => route.meta?.title as string | undefined);
+const loggingOut = ref(false);
 
 const handleLogout = async () => {
+  if (loggingOut.value) return;
+  loggingOut.value = true;
   try {
-    await logout();
-  } catch {
-    // 后端退出失败时，仍然清理前端登录态，避免用户被卡住。
-  } finally {
+    try {
+      await logout();
+    } catch {
+      // 后端退出失败时，仍然清理前端登录态，避免用户被卡住。
+    }
     localStorage.removeItem("isLoggedIn");
     ElMessage.success("已退出登录");
     await router.push("/login");
+  } finally {
+    loggingOut.value = false;
   }
 };
 
-defineExpose({ isLoginRoute, showBackButton, pageTitle, handleLogout });
+defineExpose({ isLoginRoute, showBackButton, pageTitle, loggingOut, handleLogout });
 </script>
 
 <style scoped>