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 瑙ｅ瘑 锛氬瓧绗︿覆 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