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

src/components/Login.vue

@@ -2,9 +2,8 @@
 import {reactive, ref} from "vue";
 import {ElMessage, type FormInstance, type FormRules} from "element-plus";
 import type {InternalRuleItem, Value} from "async-validator";
-import request from "@/utils/request";
 import router from "@/router";
-import {routes} from "vue-router/auto-routes";
+import { login } from "@/api/login";
 
 interface RegisterData {
   username: string
@@ -45,17 +44,15 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid, fields) => {
     if (valid) {
-      console.log(registerData)
-      request.post("/login", {password:registerData.password,username:registerData.username}).then(result =>{
-        console.log(result)
+      login(registerData.username, registerData.password).then(result =>{
         if (result.code === 200) {
+          localStorage.setItem("isLoggedIn", "true");
           ElMessage.success(result.message)
-          router.push("./welcome")
+          router.push("/welcome")
         } else {
           ElMessage.error(result.message)
         }
       })
-      console.log('submit!')
     } else {
       console.log('error submit!', fields)
     }
@@ -68,10 +65,10 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 <template>
   <div class="login">
     <el-form ref="loginForm" :model = "registerData">
-      <el-form-item label="账号：" :rules="rules.username" :model="registerData.username" prop="username">
+      <el-form-item label="账号：" :rules="rules.username" prop="username">
         <el-input v-model= "registerData.username"/>
       </el-form-item>
-      <el-form-item label="密码：" :rules="rules.password" :model="registerData.password" prop="password">
+      <el-form-item label="密码：" :rules="rules.password" prop="password">
         <el-input v-model= "registerData.password" type="password"/>
       </el-form-item>
       <el-form-item>

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>

src/components/Welcome.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import router from "@/router/index.js";
+import router from "@/router";
 
 const startStudy = () => {
   router.push("/study");
@@ -12,11 +12,7 @@ const startReview = () => {
 <template>
   <el-container class="container">
     <el-header class="header">
-<!--      <div class="marquee-wrapper">-->
-<!--        <div class="marquee-content">-->
-          FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
-<!--        </div>-->
-<!--      </div>-->
+      欢迎回来，今天也稳步推进学习计划
     </el-header>