From 05569927171387146f0f67fcc5798be8b067cf0b Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期五, 21 四月 2023 12:54:53 +0800
Subject: [PATCH] 登录时密码加密

---
 package-lock.json               |   11 +++++
 src/utils/cryptojs.js           |   53 ++++++++++++++++++++++++++
 src/views/login/index.vue       |   52 ++++++++++++++++++++------
 package.json                    |    1 
 src/views/operate/log/index.vue |    2 
 5 files changed, 106 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7a61506..55ee0cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@amap/amap-jsapi-loader": "^1.0.1",
         "axios": "^0.27.2",
         "core-js": "^3.8.3",
+        "crypto-js": "^4.1.1",
         "docxtemplater": "^3.32.4",
         "docxtemplater-image-module-free": "^1.1.1",
         "echarts": "^5.4.0",
@@ -4073,6 +4074,11 @@
       "bin": {
         "semver": "bin/semver"
       }
+    },
+    "node_modules/crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
     },
     "node_modules/css-declaration-sorter": {
       "version": "6.3.1",
@@ -15368,6 +15374,11 @@
         }
       }
     },
+    "crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/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",
diff --git a/package.json b/package.json
index 06914cb..f8cdbe5 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
+    "crypto-js": "^4.1.1",
     "docxtemplater": "^3.32.4",
     "docxtemplater-image-module-free": "^1.1.1",
     "echarts": "^5.4.0",
diff --git a/src/utils/cryptojs.js b/src/utils/cryptojs.js
new file mode 100644
index 0000000..a3c21f3
--- /dev/null
+++ b/src/utils/cryptojs.js
@@ -0,0 +1,53 @@
+import CryptoJS from 'crypto-js/crypto-js'
+
+// 榛樿鐨� KEY 涓� iv 濡傛灉娌℃湁缁�
+const KEY = CryptoJS.enc.Utf8.parse("1234567890123456");
+const IV = CryptoJS.enc.Utf8.parse('1234567890123456');
+/**
+ * AES鍔犲瘑 锛氬瓧绗︿覆 key iv  杩斿洖base64 
+ */
+export function Encrypt(word, keyStr, ivStr) {
+  
+  let key = KEY
+  let iv = IV
+
+  if (keyStr) {
+    key = CryptoJS.enc.Utf8.parse(keyStr);
+    iv = CryptoJS.enc.Utf8.parse(ivStr);
+  }
+
+  let srcs = CryptoJS.enc.Utf8.parse(word);
+  var encrypted = CryptoJS.AES.encrypt(srcs, key, {
+    iv: iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.ZeroPadding
+  });
+ // console.log("-=-=-=-", encrypted.ciphertext)
+  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
+
+}
+/**
+ * AES 瑙e瘑 锛氬瓧绗︿覆 key iv  杩斿洖base64 
+ *
+ */
+export function Decrypt(word, keyStr, ivStr) {
+  let key  = KEY
+  let iv = IV
+
+  if (keyStr) {
+    key = CryptoJS.enc.Utf8.parse(keyStr);
+    iv = CryptoJS.enc.Utf8.parse(ivStr);
+  }
+
+  let base64 = CryptoJS.enc.Base64.parse(word);
+  let src = CryptoJS.enc.Base64.stringify(base64);
+
+  var decrypt = CryptoJS.AES.decrypt(src, key, {
+    iv: iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.ZeroPadding
+  });
+
+  var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+  return decryptedStr.toString();
+}
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 3448171..85f76a9 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,9 +3,7 @@
     <!-- 浜у搧鍚嶇О -->
     <div class="text">
       <div class="logo">
-        <img
-          :src="imgUrl"
-          alt="">
+        <img :src="imgUrl" alt="" />
       </div>
       <div class="text-r">
         <h2 class="title font-extra-large">閬傛槍鍘挎櫤鎱ф墽娉曞钩鍙�</h2>
@@ -16,12 +14,24 @@
     </div>
     <el-card class="login-form-layout">
       <!-- 琛ㄥ崟 -->
-      <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
+      <el-form
+        autoComplete="on"
+        :model="loginForm"
+        :rules="loginRules"
+        ref="loginForm"
+        label-position="left"
+      >
         <!-- title -->
         <h2 class="login-title">鐢ㄦ埛鐧诲綍 / USER LOGIN</h2>
         <el-form-item prop="username">
           <!-- 鐢ㄦ埛鍚嶈緭鍏ユ -->
-          <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="璇疯緭鍏ョ敤鎴峰悕绉�">
+          <el-input
+            name="username"
+            type="text"
+            v-model="loginForm.username"
+            autoComplete="on"
+            placeholder="璇疯緭鍏ョ敤鎴峰悕绉�"
+          >
             <span slot="prefix">
               <svg-icon icon-class="user" class="color-main"></svg-icon>
             </span>
@@ -29,21 +39,35 @@
         </el-form-item>
         <el-form-item prop="password">
           <!-- 瀵嗙爜杈撳叆妗� -->
-          <el-input name="password" :type="pwdType ? 'text' : 'password'" @keyup.enter.native="handleLogin"
-            v-model="loginForm.password" autoComplete="on" placeholder="璇疯緭鍏ョ櫥褰曞瘑鐮�">
+          <el-input
+            name="password"
+            :type="pwdType ? 'text' : 'password'"
+            @keyup.enter.native="handleLogin"
+            v-model="loginForm.password"
+            autoComplete="on"
+            placeholder="璇疯緭鍏ョ櫥褰曞瘑鐮�"
+          >
             <!-- 杈撳叆妗嗗墠icon -->
             <span slot="prefix">
               <svg-icon icon-class="password" class="color"></svg-icon>
             </span>
             <!-- 杈撳叆妗嗗悗icon -->
             <span slot="suffix" @click="showPwd">
-              <svg-icon :icon-class="pwdType ? 'yanjing-zhengyan' : 'yanjing-biyan'" class="pointer"></svg-icon>
+              <svg-icon
+                :icon-class="pwdType ? 'yanjing-zhengyan' : 'yanjing-biyan'"
+                class="pointer"
+              ></svg-icon>
             </span>
           </el-input>
         </el-form-item>
         <!-- 琛ㄥ崟鎻愪氦鎸夐挳 -->
         <el-form-item style="margin-bottom: 60px; text-align: center">
-          <el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="handleLogin">
+          <el-button
+            style="width: 100%"
+            type="primary"
+            :loading="loading"
+            @click.native.prevent="handleLogin"
+          >
             鐧诲綍
           </el-button>
         </el-form-item>
@@ -56,6 +80,8 @@
 import { isvalidUsername } from "@/utils/validate";
 import { createNamespacedHelpers } from "vuex";
 import users from "@/api/users";
+import {Decrypt,Encrypt} from '@/utils/cryptojs'
+import leafletMapVue from '../systemSetting/device/grid/components/components/leafletMap.vue';
 
 const { mapActions } = createNamespacedHelpers("users");
 export default {
@@ -112,8 +138,10 @@
     },
     ...mapActions(["login"]),
     handleLogin() {
-      const { username, password } = this.loginForm;
+      let { username, password } = this.loginForm;
       const that = this;
+      
+      password = Encrypt(password)
       this.$axios
         .post("sccg/admin/login", {
           password,
@@ -168,7 +196,7 @@
   top: 20%;
   right: 5%;
   width: 360px;
-  &:deep(.el-input__inner){
+  &:deep(.el-input__inner) {
     background-color: #fff !important;
     border: 1px solid #dcdfe6 !important;
   }
@@ -183,7 +211,7 @@
   width: 420px;
   justify-content: space-between;
 
-  .logo>img {
+  .logo > img {
     width: 75px;
     height: 75px;
     border-radius: 4px;
diff --git a/src/views/operate/log/index.vue b/src/views/operate/log/index.vue
index f10f778..d9b0b5f 100644
--- a/src/views/operate/log/index.vue
+++ b/src/views/operate/log/index.vue
@@ -64,7 +64,7 @@
               @click="handleExport"
               >瀵煎嚭</el-button
             >
-            <el-button class="el-icon-delete-solid">娓呯┖</el-button>
+            <!-- <el-button class="el-icon-delete-solid">娓呯┖</el-button> -->
           </div>
         </div>
         <!-- 鏁版嵁灞曠ず -->

--
Gitblit v1.8.0