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

企业级管理系统/web/admin_system/src/layout/components/Header.vue

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:39:04
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-09 15:33:54
+ * @LastEditTime: 2023-01-11 17:07:13
  * @FilePath: \admin_system\src\layout\components\Header.vue
  * @Description: 
  * 
@@ -23,7 +23,8 @@
 </template>
 
 <script>
-import { ElMessage } from "element-plus";
+//import { ElMessage } from "element-plus";
+import { Logout } from "../../utils/api/info/account";
 
 export default {
     name: "AppBanner",
@@ -41,13 +42,14 @@ export default {
     methods: {
         logout()
         {
-            ElMessage({
-                message: "退出系统",
-                type: "error",
-                center: true,
+            this.$confirm("是否退出系统？", "提示", {
+                confirmButtonText: "是",
+                cancelButtonText: "否",
+                type: "warning",
+            }).then(() =>
+            {
+                Logout();
             });
-
-            this.$store.commit("app/SET_ASIDE_COLLAPSE");
         },
     },
 };

企业级管理系统/web/admin_system/src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-12-14 15:12:46
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-07 11:54:38
+ * @LastEditTime: 2023-01-11 10:28:24
  * @FilePath: \admin_system\src\router\index.js
  * @Description: 定义应用路由配置
  * 
@@ -15,7 +15,7 @@ const routes = [
   {
     path: "/",
     name: "Root",
-    redirect: "Home",
+    redirect: "Login", //默认路由指向登录页面
     hidden: true,
   },
   {
@@ -99,4 +99,22 @@ const router = createRouter({
   routes
 });
 
+//前置路由守卫
+router.beforeEach((to) =>
+{
+  const token = window.localStorage.getItem("token");
+
+  if (!token)
+  {
+    //如果token不存在，判断路由是否走向login,如果不是则指向login
+    //走向login则不干预
+    if (to.name !== "Login")
+    {
+      return {
+        name: "Login",
+      };
+    }
+  }
+});
+
 export default router;

企业级管理系统/web/admin_system/src/store/index.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-12-14 15:12:46
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-08 11:07:02
+ * @LastEditTime: 2023-01-11 14:20:04
  * @FilePath: \admin_system\src\store\index.js
  * @Description: 
  * 
@@ -11,8 +11,10 @@
 import { createStore } from 'vuex';
 import app from "./modules/app";
 
-export default createStore({
+const store = createStore({
   modules: {
     app,
   }
 });
+
+export default store;

企业级管理系统/web/admin_system/src/store/modules/app.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-01-07 22:25:43
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-09 15:21:21
+ * @LastEditTime: 2023-01-11 09:44:46
  * @FilePath: \admin_system\src\store\modules\app.js
  * @Description: vuex中存放全局数据的模块
  * 
@@ -11,6 +11,7 @@
 const state = {
     count: 1001,
     asideBarCollapse: false, //侧边栏折叠标志位
+    userInfo: null, //用户信息和token
 };
 const getters = {};
 const mutations = {
@@ -22,6 +23,10 @@ const mutations = {
     {
         state.asideBarCollapse = !state.asideBarCollapse;
     },
+    SET_USERINFO(state, userInfo)
+    {
+        state.userInfo = userInfo;
+    }
 };
 const actions = {};
 

企业级管理系统/web/admin_system/src/utils/api/info/account.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-12-22 09:10:20
  * @LastEditors: Kane
- * @LastEditTime: 2022-12-23 17:26:37
+ * @LastEditTime: 2023-01-11 17:02:15
  * @FilePath: \admin_system\src\utils\api\info\account.js
  * @Description:
  *
@@ -10,6 +10,8 @@
  */
 import instance from "@/utils/api/request";
 import { API_URL } from "@/utils/api/config"; //所有API的地址
+import router from "../../../router/index";
+import store from "../../../store/index";
 
 export function Login(userInfo)
 {
@@ -24,3 +26,22 @@ export function Login(userInfo)
         }
     );
 }
+
+export function Logout()
+{
+    // if (this.$store && this.$store.state.app)
+    // {
+    //     //this.$store.commit();
+    // }
+
+    //const store = useStore();
+
+    //console.log(store);
+
+    console.log(store);
+
+    window.localStorage.removeItem("token");
+    window.localStorage.removeItem("user_info");
+
+    router.replace("/login");
+}

企业级管理系统/web/admin_system/src/utils/api/request.js

@@ -2,13 +2,14 @@
  * @Author: Kane
  * @Date: 2022-12-22 17:18:10
  * @LastEditors: Kane
- * @LastEditTime: 2022-12-22 20:47:10
+ * @LastEditTime: 2023-01-11 14:58:44
  * @FilePath: \admin_system\src\utils\api\request.js
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
  */
 import axios from "axios";
+import store from "../../store/index";
 
 const service = axios.create(
     {
@@ -21,6 +22,23 @@ const service = axios.create(
 service.interceptors.request.use(
     function (config)
     {
+        //axios拦截器请求，在请求的header加上用户名和token
+        if (store.state.app.userInfo)
+        {
+            //如果userInfo存在，则加上用户名和token
+            const username = store.state.app.userInfo.user_info.p13uid;
+            const token = store.state.app.userInfo.token;
+
+            config.headers["token"] = token;
+            config.headers["username"] = username;
+
+            console.log("拦截器，加上username和token！", username, token);
+        }
+        else
+        {
+            console.log("拦截器，userinfo为空！");
+        }
+
         return config;
     },
     function (error)

企业级管理系统/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>