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

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>