功能(鉴权): 增加前端登录态守卫与退出流程

src/components/MyHead.vue

@@ -1,23 +1,42 @@
 <template>
-  <div class="head">学习进度跟踪系统
-  <el-button v-if="!isLoginRoute">退出登录</el-button>
+  <div class="head">
+    <span>学习进度跟踪系统</span>
+    <el-button v-if="!isLoginRoute" @click="handleLogout">退出登录</el-button>
   </div>
 </template>
 
 <script setup lang="ts">
 import {computed} from "vue";
 import {useRoute} from "vue-router";
+import { ElMessage } from "element-plus";
+import router from "@/router";
+import { logout } from "@/api/login";
 
 var route = useRoute();
 
 const isLoginRoute = computed(()=>route.path === '/login');
+
+const handleLogout = async () => {
+  try {
+    await logout();
+  } catch {
+    // 后端退出失败时，仍然清理前端登录态，避免用户被卡住。
+  } finally {
+    localStorage.removeItem("isLoggedIn");
+    ElMessage.success("已退出登录");
+    await router.push("/login");
+  }
+};
 </script>
 
 <style scoped>
 .head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   font-size: 30px;
-  text-align: center;
+  padding: 0 24px;
   background: green;
   min-height: 7vh;
 }
-</style>
+</style>