加入路由守卫和退出系统功能。

企业级管理系统/web/admin_system/src/views/account/Login.vue

@@ -3,7 +3,7 @@
  * @Author: Kane
  * @Date: 2022-12-14 15:23:54
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-10 21:12:02
+ * @LastEditTime: 2023-01-11 14:40:11
  * @FilePath: \admin_system\src\views\account\Login.vue
  * @Description: 
  * 
@@ -56,6 +56,7 @@
 <script>
 import { Login } from "@/utils/api/info/account";
 import { ElMessage } from "element-plus";
+import router from "../../router/index";
 
 export default {
   name: "loginPage",
@@ -94,17 +95,30 @@ export default {
     },
     login()
     {
+      if (this.loginForm.username.length === 0 || this.loginForm.password === 0)
+      {
+        ElMessage({
+          message: "请填写您的P13账号和密码！",
+          type: "error",
+        });
+
+        return;
+      }
+
       this.submit_btn_disable = true;
       this.submit_btn_loading = true;
 
       const userInfo = {
-        p13account: "588",
-        password: "Kane@1983",
+        p13account: this.loginForm.username,
+        password: this.loginForm.password,
       };
 
       Login(userInfo)
         .then((response) =>
         {
+          //成功获取到返回值时的响应函数，要判断返回值的成功标志
+          //验证成功，将获取到的token和用户信息保存到vuex和localStoreage
+          //然后router.push，进行路由跳转到控制台
           const data = response.data;
 
           //判断是否成功，显示提示信息
@@ -117,21 +131,29 @@ export default {
             });
 
             this.staffInfo = data.staffInfo;
+
+            //保存用户信息和token
+            this.saveUserInfo(data);
+
+            //验证成功，跳转路由
+            router.push("/home");
           }
           else
           {
+            //验证失败
             ElMessage({
               message: data.message,
               type: "error",
               center: true,
             });
-          }
 
-          this.submit_btn_disable = false;
-          this.submit_btn_loading = false;
+            this.submit_btn_disable = false;
+            this.submit_btn_loading = false;
+          }
         })
         .catch((error) =>
         {
+          //没有获取到响应数据
           console.log(error);
 
           ElMessage({
@@ -143,13 +165,30 @@ export default {
           this.submit_btn_disable = false;
           this.submit_btn_loading = false;
         });
+    },
+    saveUserInfo(userInfo) //将获取到的用户信息和token保存到vuex和localStorage
+    {
+      //保存到vuex
+      this.$store.commit("app/SET_USERINFO", userInfo);
+
+      //保存到localStorage
+      const token = userInfo.token;
+      const userInfoJson = JSON.stringify(userInfo);
+
+      window.localStorage.setItem("token", token);
+      window.localStorage.setItem("user_info", userInfoJson);
     }
   },
   created()
   {
     //初始化菜单选项
     this.current_menu = this.tab_menu[0].type;
-  }
+  },
+  mounted()
+  {
+    //清理状态
+    this.$store.state.app.userInfo = null;
+  },
 };
 </script>