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