增加登录判断,并添加页面的判断是否为登录状态

Signed-off-by: Nxiesi <305492881@qq.com>

src/main.js

@@ -8,30 +8,30 @@ import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 import axios from 'axios'
 import VueAxios from 'vue-axios'
+import {
+    isLogin
+} from "@/api/api.js";
 
 createApp(App).use(store).use(router).use(ElementPlus).use(VueAxios, axios).mount("#app");
 
 router.beforeEach((to, from, next) => {
     // to and from are both route objects. must call `next`.
     if (to.meta.needLogin) {
-        axios.get("http://localhost:8070/login", {
-                withCredentials: true
-            })
-            .then((response) => {
-                console.log(response.data);
-                if (response.data.Code == 0) {
-                    //显示用户名
-                    console.log(response.data.data.name);
-                    next();
-                } else {
-                    //当前为有课,不允许登录
-                    console.log("需要跳转到登录页面");
-                    router.push("Login");
-                    next({
-                        path: "Login",
-                    });
-                }
-            });
+        isLogin().then((response) => {
+            console.log(response.data);
+            if (response.data.Code == 0) {
+                //显示用户名
+                console.log(response.data.data.name);
+                next();
+            } else {
+                //当前为有课,不允许登录
+                console.log("需要跳转到登录页面");
+                router.push("Login");
+                next({
+                    path: "Login",
+                });
+            }
+        });
         next();
     } else {
         next();

src/router/index.js

@@ -9,7 +9,7 @@ const routes = [{
     name: "Home",
     component: Home,
     meta: {
-      needLogin: false,
+      needLogin: true,
     }
   },
   {

src/views/Home.vue

@@ -64,6 +64,7 @@ import { isLogin } from "@/api/api.js";
 import LoadFBX from "@/components/LoadFBX.vue";
 import qs from "qs";
 //import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
 
 export default {
   name: "Home",
@@ -104,7 +105,20 @@ export default {
       this.axios
         .post("http://localhost:8070/logout", {}, { withCredentials: true })
         .then((response) => {
-          console.log(response.data);
+          if (response.data.Code == 0) {
+            ElMessage({
+              type: "info",
+              message: "退出成功",
+              showClose: "true",
+            });
+            this.$router.push("Login");
+          } else {
+            ElMessage({
+              type: "info",
+              message: "退出失败",
+              showClose: "true",
+            });
+          }
         });
     },
   },

src/views/Login.vue

 <template>
-  <div>登录界面</div>
+  <el-form
+    :model="ruleForm"
+    status-icon
+    :rules="rules"
+    ref="ruleForm"
+    label-width="100px"
+    class="demo-ruleForm"
+  >
+    <el-form-item label="工号" prop="name">
+      <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
+    </el-form-item>
+    <el-form-item label="密码" prop="password">
+      <el-input
+        type="password"
+        v-model="ruleForm.password"
+        autocomplete="off"
+        show-password="true"
+      ></el-input>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button type="primary" @click="submitForm(ruleForm)">登录</el-button>
+    </el-form-item>
+  </el-form>
 </template>
 
 <script>
-export default {};
+import { Login } from "@/api/api.js";
+import { ElMessage } from "element-plus";
+
+export default {
+  data() {
+    var validateHaveWorkNumber = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error("工号不能为空"));
+      } else {
+        // console.log(value);
+      }
+      callback();
+    };
+
+    var validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else {
+        if (this.ruleForm.checkPass !== "") {
+          this.$refs.ruleForm.validateField("checkPass");
+        }
+        callback();
+      }
+    };
+    return {
+      ruleForm: {
+        name: "",
+        password: "",
+      },
+      rules: {
+        password: [
+          { required: true, validator: validatePass, trigger: "blur" },
+        ],
+        name: [
+          {
+            required: true,
+            validator: validateHaveWorkNumber,
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      Login(formName).then((response) => {
+        if (response.data.Code == 0) {
+          ElMessage({
+            showClose: true,
+            message: "登录成功",
+            type: "info",
+          });
+          this.$router.push("/");
+        } else {
+          ElMessage({
+            showClose: true,
+            message: "登录失败[工号]或[密码]错误",
+            type: "error",
+          });
+        }
+      });
+    },
+  },
+};
 </script>
\ No newline at end of file