登录页面的密码加密保护

package.json

@@ -50,7 +50,7 @@
     "html2canvas": "^1.4.1",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
-    "jsencrypt": "3.2.1",
+    "jsencrypt": "^3.2.1",
     "lib-flexible": "^0.3.2",
     "nprogress": "0.2.0",
     "quill": "1.3.7",

src/api/encrypt.js

@@ -0,0 +1,8 @@
+import { JSEncrypt } from 'jsencrypt'
+
+export function encryptedData(publicKey,password){
+  const encryptor = new JSEncrypt()
+  encryptor.setPublicKey(publicKey)
+  return encryptor.encrypt(password+'')
+}
+

src/api/login.js

@@ -1,5 +1,16 @@
 import request from '@/utils/request'
 
+// 获取密码加密传输公钥
+export function getSecretKey() {
+  return request({
+    url: '/auth/getSecretKey',
+    headers: {
+      isToken: false
+    },
+    method: 'post'
+  })
+}
+
 // 登录方法
 export function login(username, password, code, uuid) {
   return request({

src/views/system/login.vue

@@ -47,8 +47,11 @@
 <script>
 	import StarBackground from '@/components/star'
 	import {
-		getCodeImg,fontConfig
+		getCodeImg,fontConfig,getSecretKey
 	} from '@/api/login'
+	import {
+    encryptedData
+	} from '@/api/encrypt'
 	import Cookies from 'js-cookie'
 	import {
 		encrypt,
@@ -66,9 +69,10 @@
 		data() {
 			return {
         backgroudImg:require('../../assets/images/login/login-ty.jpg'), //背景图片
-        systemTitle:{
-          title:'通榆县乡村振兴综合监管平台',  //标题
-          subTitle:'数字应急'  ,//副标题
+        systemTitle: {
+          title: '通榆县乡村振兴综合监管平台',  //标题
+          subTitle: '数字应急',//副标题
+        },
 				codeUrl: '',
 				loginForm: {
 					username: 'admin',
@@ -113,7 +117,7 @@
 		created() {
 			this.getCode()
 			this.getCookie()
-      this.fontConfig();
+      this.fontConfig()
 		},
 		methods: {
       fontConfig(){
@@ -164,19 +168,36 @@
 							Cookies.remove('password')
 							Cookies.remove('rememberMe')
 						}
-						this.$store.dispatch('Login', this.loginForm).then(() => {
-							console.log('!@!@!@', this.redirect)
-							this.$router.push({
-								//path: this.redirect || '/'
-								path: '/'
-							}).catch(() => {})
-						}).catch(() => {
-							this.loading = false
-							if (this.captchaOnOff) {
-								this.getCode()
-							}
-						})
-					}
+						// this.$store.dispatch('Login', this.loginForm).then(() => {
+						// 	console.log('!@!@!@', this.redirect)
+						// 	this.$router.push({
+						// 		//path: this.redirect || '/'
+						// 		path: '/'
+						// 	}).catch(() => {})
+						// }).catch(() => {
+						// 	this.loading = false
+						// 	if (this.captchaOnOff) {
+						// 		this.getCode()
+						// 	}
+						// })
+            //登录前先获取密码加密传输的公钥，对密码进行加密
+            getSecretKey().then(res => {
+              const encryptedPassword = encryptedData(res.data,this.loginForm.password);
+              this.loginForm.password = encryptedPassword;
+              this.$store.dispatch('Login', this.loginForm).then(() => {
+                this.$router.push({
+                  //path: this.redirect || '/'
+                  path: '/'
+                })
+              }).catch(() => {
+                this.loading = false
+                if (this.captchaOnOff) {
+                  this.getCode()
+                }
+              })
+            })
+
+          }
 				})
 			}
 		}