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

src/api/login.ts

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export const login = (username: string, password: string) => {
+  return request.post("/login", { username, password });
+};
+
+export const logout = () => {
+  return request.post("/logout");
+};

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)
+      login(registerData.username, registerData.password).then(result =>{
-      request.post("/login", {password:registerData.password,username:registerData.username}).then(result =>{
-        console.log(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">学习进度跟踪系统
+  <div class="head">
-  <el-button v-if="!isLoginRoute">退出登录</el-button>
+    <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>
 
 

src/router/index.ts

@@ -1,56 +1,70 @@
-import {createRouter,createWebHistory} from 'vue-router'
+import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
-import Login from "@/components/Login.vue";
+
-import Study from "@/components/Study.vue";
+const routes: RouteRecordRaw[] = [
-import Welcome from "@/components/Welcome.vue";
+  {
-import Review from "@/components/Review.vue";
+    path: "/",
-import StartTask from "@/components/StartTask.vue";
+    redirect: "/login",
-import TaskForm from "@/components/TaskForm.vue";
+  },
+  {
+    path: "/login",
+    component: () => import("@/components/Login.vue"),
+    meta: { requiresAuth: false },
+  },
+  {
+    path: "/welcome",
+    component: () => import("@/components/Welcome.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/study",
+    component: () => import("@/components/Study.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/review",
+    component: () => import("@/components/Review.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/start-task/:taskNum",
+    name: "start-task",
+    component: () => import("@/components/StartTask.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/add-task",
+    name: "add-task",
+    component: () => import("@/components/TaskForm.vue"),
+    meta: {
+      requiresAuth: true,
+      action: "add",
+      buttonText: "添加",
+    },
+  },
+  {
+    path: "/update-task/:taskId",
+    name: "update-task",
+    component: () => import("@/components/TaskForm.vue"),
+    meta: {
+      requiresAuth: true,
+      action: "update",
+      buttonText: "更新",
+    },
+  },
+];
 
 const router = createRouter({
-    history: createWebHistory(),
+  history: createWebHistory(),
-    routes:[
+  routes,
-        {
-          path:'/',
-          redirect:'/login',
-        },
-        {
-            path:'/login',
-            component:Login
-        },
-        {
-            path:'/welcome',
-            component: Welcome
-        },
-        {
-            path:'/study',
-            component: Study
-        },
-        {
-            path:'/review',
-            component: Review
-        },
-        {
-            path:'/start-task/:taskNum',
-            name:'start-task',
-            component: StartTask
-        },
-        {
-            path:'/add-task',
-            name:'add-task',
-            component: TaskForm,
-            meta:{
-                action: 'add', buttonText: '添加'
-            }
-        },
-        {
-            path:'/update-task/:taskId',
-            name:'update-task',
-            component: TaskForm,
-            meta:{
-                action: 'update', buttonText: '更新'
-            }
-        }
-    ]
 });
 
-export default router;
+router.beforeEach((to) => {
+  if (to.meta.requiresAuth === false) return true;
+  const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
+  if (!isLoggedIn) {
+    return "/login";
+  }
+  return true;
+});
+
+export default router;