登录页面优化，header添加退出逻辑。

package-lock.json

@@ -3211,6 +3211,11 @@
         }
       }
     },
+    "crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
+    },
     "css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "axios": "^1.1.3",
     "core-js": "^3.8.3",
+    "crypto-js": "^4.1.1",
     "deep-clone": "^3.0.3",
     "docx-preview": "^0.1.4",
     "echarts": "^5.4.0",

src/components/layout/Header.vue

@@ -43,8 +43,15 @@
             <div class="alert-info">12</div>
           </div>
           <div class="inner-user">
-            <div class="inner-user-icon"></div>
-            <div class="inner-user-text">管理员</div>
+            <el-dropdown @command="handleCommand">
+              <span class="el-dropdown-link">
+                <div class="inner-user-icon"></div>
+                <div class="inner-user-text">管理员</div>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="loginOut">注销登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </div>
         </div>
       </el-col>
@@ -114,6 +121,24 @@ export default {
         subIndex: index[1],
         name: name
       });
+    },
+    // 用户菜单
+    handleCommand(command) {
+      console.log(command);
+      switch (command) {
+        case "loginOut":
+          this.loginOut();
+      }
+    },
+    // 用户退出操作
+    loginOut() {
+      this.$router.push("/login");
+      const h = this.$createElement;
+
+      this.$notify({
+        title: "登出成功",
+        message: h("i", { style: "color: teal" }, "用户退出！感谢使用！")
+      });
     }
   },
   watch: {

src/utils/publicFunction.js

@@ -1,6 +1,33 @@
 /**
  * 公共函数库
  */
+import CryptoJS from 'crypto-js';
+
+const key = CryptoJS.enc.Utf8.parse('1234123412ABCDEF'); //十六位十六进制数作为密钥
+const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412'); //十六位十六进制数作为密钥偏移量
+
+/* 加密 */
+const Encrypt = (word) => {
+  let srcs = CryptoJS.enc.Utf8.parse(word);
+  let encrypted = CryptoJS.AES.encrypt(srcs, key, {
+    iv: iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  return encrypted.ciphertext.toString().toUpperCase();
+}
+/* 解密 - PRIVATE_KEY - 验证 */
+const Decrypt = (word) => {
+  let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
+  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
+  let decrypt = CryptoJS.AES.decrypt(srcs, key, {
+    iv: iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+  return decryptedStr.toString();
+}
 //随机id生成
 const buildGuid = function (options) {
   var text = "";
@@ -48,5 +75,7 @@ const getRandomColor = function () {
 export default {
   buildGuid,
   compare,
-  getRandomColor
+  getRandomColor,
+  Encrypt,
+  Decrypt
 };

src/views/Login.vue

@@ -35,7 +35,7 @@
           />
         </svg>
       </el-input>
-      <el-input placeholder="密码" v-model="password">
+      <el-input placeholder="密码"  type="password" autocomplete="off" v-model="password">
         <svg
           class="loginInputIcon"
           slot="prefix"
@@ -86,6 +86,7 @@
  * @author: LiuMengxiang
  * @Date: 2022年12月02日
  */
+import publicFun from "@/utils/publicFunction.js";
 export default {
   name: "Login",
   components: {},
@@ -96,7 +97,17 @@ export default {
       RememberYourPassword: localStorage.getItem("RememberYourPassword")
     };
   },
-  mounted() {},
+  mounted() {
+    this.$nextTick(() => {
+      this.RememberYourPassword = localStorage.getItem("RememberYourPassword");
+      if (this.RememberYourPassword) {
+        if (localStorage.getItem("_USER_NAME") && localStorage.getItem("_PASSWORD")) {
+          this.userName = localStorage.getItem("_USER_NAME");
+          this.password = publicFun.Decrypt(localStorage.getItem("_PASSWORD"));
+        }
+      }
+    });
+  },
   destroy() {},
   props: [],
   methods: {
@@ -109,16 +120,18 @@ export default {
         this.$message.info("请输入密码");
         return false;
       }
+      // 登录校验成功后
+      if (this.RememberYourPassword) {
+        localStorage.setItem("RememberYourPassword", true);
+        localStorage.setItem("_USER_NAME", this.userName);
+        localStorage.setItem("_PASSWORD", publicFun.Encrypt(this.password));
+      }
       this.$router.push("/");
       const h = this.$createElement;
 
       this.$notify({
         title: "登录成功",
-        message: h(
-          "i",
-          { style: "color: teal" },
-          this.userName+",欢迎回来！"
-        )
+        message: h("i", { style: "color: teal" }, this.userName + ",欢迎回来！")
       });
     },
     forgetYouPassword() {
@@ -143,7 +156,7 @@ export default {
   background: url("@static/images/bg.png") no-repeat center;
   background-size: 100% 100%;
   .loginBox_title {
-    position:absolute;
+    position: absolute;
     text-align: center;
     margin-bottom: 600px;
     width: 100%;