登录页面的密码加密保护

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,15 @@
 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

@@ -46,8 +46,11 @@
 
 <script>
   import {
-    getCodeImg,fontConfig
+    getCodeImg,fontConfig,getSecretKey
   } from '@/api/login'
+  import {
+    encryptedData
+  } from '@/api/encrypt'
   import Cookies from 'js-cookie'
   import {
     encrypt,
@@ -158,18 +161,21 @@
               Cookies.remove('password')
               Cookies.remove('rememberMe')
             }
-            this.$store.dispatch('Login', this.loginForm).then(() => {
-              console.log('!@!@!@', this.redirect)
-              this.$router.push({
-                //path: this.redirect || '/'
-                path: '/'
+            //登录前先获取密码加密传输的公钥，对密码进行加密
+            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()
+                }
               })
-            }).catch(() => {
-              this.loading = false
-              if (this.captchaOnOff) {
-                this.getCode()
-              }
             })
           }
         })