修改缓存参数加密

package.json

@@ -16,6 +16,7 @@
     "codemirror": "^5.45.0",
     "crypto-js": "^4.0.0",
     "element-ui": "^2.11.1",
+    "js-md5": "^0.7.3",
     "material-design-icons-iconfont": "^4.0.5",
     "qs": "^6.9.4",
     "string-format": "^2.0.0",
@@ -29,6 +30,7 @@
     "@babel/plugin-transform-runtime": "^7.4.0",
     "@babel/preset-env": "^7.4.2",
     "@babel/runtime": "^7.4.2",
+    "@types/crypto-js": "^4.0.1",
     "autoprefixer": "^9.5.0",
     "babel-loader": "^8.0.5",
     "babel-plugin-syntax-jsx": "^6.18.0",

src/main.js

@@ -24,6 +24,11 @@ import router from './router'
 Vue.config.productionTip = false
 
 
+// 导入 crypto-js 包 
+import cryptoJS from 'crypto-js/crypto-js'
+//把AES加密vue原型里
+Vue.prototype.$cryptoJS = cryptoJS;
+
 /* eslint-disable no-new */
 import api from './request/api'
 Vue.prototype.$api = api;

src/pages/login.vue

@@ -15,7 +15,7 @@
           class="login_forms"
         >
           <el-form-item>
-            <p class="item_p">账号</p>
+            <p class="item_p">账号11</p>
             <el-input
               v-model.trim="form.userid"
               autofocus="autofocus"
@@ -291,7 +291,7 @@
   </div>
 </template> 
 <script>
-import { getCookie, clearCookie, setCookie } from "@/services/cookie.js";
+import { getCookie, clearCookie, setCookie } from "@/utils/common.js";
 import SIdentify from "@/components/sidentify";
 import CryptoJS from "crypto-js"; //加密js
 export default {
@@ -494,11 +494,12 @@ export default {
     this.init();
   },
   created() {
-    if (getCookie("userinfo")) {
+    if (localStorage.getItem("rememberPsw") == "true") {
+      var pwd = getCookie("password");
+      var bytes = CryptoJS.AES.decrypt(pwd.toString(), "swuE9cmCZQwrkYRV");
       this.checked = true;
-      let userinfo = decodeURI(decodeURI(getCookie("userinfo"))).split(",");
-      this.form.userid = userinfo[0];
-      this.form.password = userinfo[1];
+      this.form.userid = getCookie("username");
+      this.form.password = bytes.toString(CryptoJS.enc.Utf8);
     } else {
       this.checked = false;
     }
@@ -527,17 +528,17 @@ export default {
           type: "error",
         });
       } else {
-        self.$refs["yzms"].validate((volid_yzm) => {
-          if (volid_yzm) {
+        // self.$refs["yzms"].validate((volid_yzm) => {
+        //   if (volid_yzm) {
         self.submitLoginForm();
-          } else {
+        // } else {
         //   self.$message({
         //     message: "请完善验证码",
         //     type: "error",
         //   });
-            self.refreshCode();
-          }
-        });
+        //   self.refreshCode();
+        //   }
+        // });
       }
     },
     // 提交登录表单
@@ -586,13 +587,11 @@ export default {
     },
     login_remember_info() {
       if (this.checked) {
-        setCookie(
-          "userinfo",
-          encodeURI(encodeURI(this.form.userid + "," + this.form.password))
-        );
+        setCookie(this.form.userid, this.form.password, 7);
       } else {
-        clearCookie("userinfo");
+        clearCookie();
       }
+      localStorage.setItem("rememberPsw", this.checked);
       this.login_request();
     },
     // 获取验证码
@@ -601,16 +600,8 @@ export default {
         .getrandomCode()
         .then((response) => {
           if (response.data.success == 1) {
-            // console.log(response.data.data.captcha);
             this.imgId = response.data.data.id;
             this.imgSrc = response.data.data.captcha;
-            // this.$router.push({
-            //   path: "/login",
-            //   query: {
-            //     username: this.ruleForm.username,
-            //     password: this.ruleForm.password
-            //   }
-            // });
           }
         })
         .catch(function (response) {});
@@ -654,10 +645,10 @@ export default {
             if (volid_yzm) {
               self.submitAll();
             } else {
-              // self.$message({
-              //   message: "请完善验证码",
-              //   type: "error",
-              // });
+              self.$message({
+                message: "请完善验证码",
+                type: "error",
+              });
               self.refreshCode();
             }
           });

src/utils/common.js

@@ -14,23 +14,27 @@ var formatDateTime = function (te) {
 // 取得cookie
 function getCookie(name) {
 
-
-  if (document.cookie.length > 0) {
-    var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
-    console.log(arr)
-    for (var i = 0; i < arr.length; i++) {
-      var arr2 = arr[i].split('='); //再次切割
-      //这里会切割出以username为第0项的数组、以password为第0项的数组，判断查找相对应的值
-      if (arr2[0] == 'username') {
-        name = arr2[1]; //拿到账号
-      } else if (arr2[0] == 'password') {
-        //拿到拿到加密后的密码arr2[1]并解密
-        var bytes = CryptoJS.AES.decrypt(arr2[1].toString(), 'swuE9cmCZQwrkYRV');
-        var plaintext = bytes.toString(CryptoJS.enc.Utf8); //拿到解密后的密码（登录时输入的密码）
-        name = plaintext;
-      }
-    }
+  var arrstr = document.cookie.split("; ");
+  for (var i = 0; i < arrstr.length; i++) {
+    var temp = arrstr[i].split("=");
+    if (temp[0] == name) return temp[1];
   }
+  // if (document.cookie.length > 0) {
+  //   var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
+  //   console.log(arr)
+  //   for (var i = 0; i < arr.length; i++) {
+  //     var arr2 = arr[i].split('='); //再次切割
+  //     //这里会切割出以username为第0项的数组、以password为第0项的数组，判断查找相对应的值
+  //     if (arr2[0] == 'username') {
+  //       name = arr2[1]; //拿到账号
+  //     } else if (arr2[0] == 'password') {
+  //       //拿到拿到加密后的密码arr2[1]并解密
+  //       var bytes = CryptoJS.AES.decrypt(arr2[1].toString(), 'swuE9cmCZQwrkYRV');
+  //       var plaintext = bytes.toString(CryptoJS.enc.Utf8); //拿到解密后的密码（登录时输入的密码）
+  //       name = plaintext;
+  //     }
+  //   }
+  // }
 
   // var nameEQ = name + '='
   // var ca = document.cookie.split(';') // 把cookie分割成组

yarn.lock

@@ -846,6 +846,11 @@
   resolved "https://registry.npm.taobao.org/@fortawesome/fontawesome-free/download/@fortawesome/fontawesome-free-5.15.1.tgz#ccfef6ddbe59f8fe8f694783e1d3eb88902dc5eb"
   integrity sha1-zP723b5Z+P6PaUeD4dPriJAtxes=
 
+"@types/crypto-js@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.0.1.tgz#3a4bd24518b0e6c5940da4e2659eeb2ef0806963"
+  integrity sha512-6+OPzqhKX/cx5xh+yO8Cqg3u3alrkhoxhE5ZOdSEv0DOzJ13lwJ6laqGU0Kv6+XDMFmlnGId04LtY22PsFLQUw==
+
 "@types/glob@^7.1.1":
   version "7.1.3"
   resolved "https://registry.npm.taobao.org/@types/glob/download/@types/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
@@ -2096,6 +2101,11 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+crypto-js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.0.0.tgz#2904ab2677a9d042856a2ea2ef80de92e4a36dcc"
+  integrity sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg==
+
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.npm.taobao.org/css-color-names/download/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -3847,6 +3857,11 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.npm.taobao.org/isobject/download/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+js-md5@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/js-md5/-/js-md5-0.7.3.tgz#b4f2fbb0b327455f598d6727e38ec272cd09c3f2"
+  integrity sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==
+
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz?cache=0&sync_timestamp=1586796397906&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-tokens%2Fdownload%2Fjs-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"