前端记住密码功能优化，密码RSA加密存cookie，RSA解密登录

package.json

@@ -17,27 +17,28 @@
     "url": "https://github.com/elunez/eladmin-qd"
   },
   "dependencies": {
+    "@riophae/vue-treeselect": "0.0.38",
     "axios": ">=0.18.1",
-    "element-ui": "2.4.6",
-    "connect": "3.6.6",
-    "js-cookie": "2.2.0",
-    "normalize.css": "7.0.0",
     "clipboard": "1.7.1",
+    "codemirror": "^5.38.0",
+    "connect": "3.6.6",
+    "echarts": "4.1.0",
+    "element-ui": "2.4.6",
+    "file-saver": "1.3.8",
+    "js-cookie": "2.2.0",
+    "jsencrypt": "^3.0.0-rc.1",
+    "jszip": "3.1.5",
+    "mavon-editor": "^2.7.0",
+    "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
+    "path-to-regexp": "2.4.0",
+    "screenfull": "3.3.3",
     "vue": "2.5.17",
     "vue-count-to": "1.0.13",
-    "echarts": "4.1.0",
-    "screenfull": "3.3.3",
     "vue-router": "3.0.2",
     "vuex": "3.0.1",
-    "xlsx": "^0.11.16",
-    "jszip": "3.1.5",
-    "@riophae/vue-treeselect": "0.0.38",
-    "file-saver": "1.3.8",
     "wangeditor": ">=3.0.0",
-    "codemirror": "^5.38.0",
-    "mavon-editor": "^2.7.0",
-    "path-to-regexp": "2.4.0"
+    "xlsx": "^0.11.16"
   },
   "devDependencies": {
     "autoprefixer": "8.5.0",

src/store/modules/user.js

@@ -1,5 +1,6 @@
 import { login, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
+import { decrypt } from '@/utils/rsaEncrypt'
 
 const user = {
   state: {
@@ -29,7 +30,7 @@ const user = {
     // 登录
     Login({ commit }, userInfo) {
       const username = userInfo.username
-      const password = userInfo.password
+      const password = decrypt(userInfo.password)
       const code = userInfo.code
       const uuid = userInfo.uuid
       const rememberMe = userInfo.rememberMe

src/utils/rsaEncrypt.js

@@ -0,0 +1,30 @@
+import JSEncrypt from 'jsencrypt/bin/jsencrypt'
+
+// 密钥对生成 http://web.chacuo.net/netrsakeypair
+
+const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
+  '2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ=='
+
+const privateKey = 'MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEA0vfvyTdGJkdbHkB8\n' +
+  'mp0f3FE0GYP3AYPaJF7jUd1M0XxFSE2ceK3k2kw20YvQ09NJKk+OMjWQl9WitG9p\n' +
+  'B6tSCQIDAQABAkA2SimBrWC2/wvauBuYqjCFwLvYiRYqZKThUS3MZlebXJiLB+Ue\n' +
+  '/gUifAAKIg1avttUZsHBHrop4qfJCwAI0+YRAiEA+W3NK/RaXtnRqmoUUkb59zsZ\n' +
+  'UBLpvZgQPfj1MhyHDz0CIQDYhsAhPJ3mgS64NbUZmGWuuNKp5coY2GIj/zYDMJp6\n' +
+  'vQIgUueLFXv/eZ1ekgz2Oi67MNCk5jeTF2BurZqNLR3MSmUCIFT3Q6uHMtsB9Eha\n' +
+  '4u7hS31tj1UWE+D+ADzp59MGnoftAiBeHT7gDMuqeJHPL4b+kC+gzV4FGTfhR9q3\n' +
+  'tTbklZkD2A=='
+
+// 加密
+export function encrypt(txt) {
+  const encryptor = new JSEncrypt()
+  encryptor.setPublicKey(publicKey) // 设置公钥
+  return encryptor.encrypt(txt) // 对需要加密的数据进行加密
+}
+
+// 解密
+export function decrypt(txt) {
+  const encryptor = new JSEncrypt()
+  encryptor.setPrivateKey(privateKey)
+  return encryptor.decrypt(txt)
+}
+

src/views/login.vue

@@ -20,7 +20,7 @@
           <img :src="codeUrl" @click="getCode">
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住我</el-checkbox>
       <el-form-item style="width:100%;">
         <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
           <span v-if="!loading">登 录</span>
@@ -28,6 +28,7 @@
         </el-button>
       </el-form-item>
     </el-form>
+    <!--  底部  -->
     <div v-if="$store.state.settings.showFooter" id="el-login-footer">
       <span v-html="$store.state.settings.footerTxt"/>
       <span> ⋅ </span>
@@ -37,6 +38,7 @@
 </template>
 
 <script>
+import { encrypt } from '@/utils/rsaEncrypt'
 import Config from '@/config'
 import { getCodeImg } from '@/api/login'
 import Cookies from 'js-cookie'
@@ -45,6 +47,7 @@ export default {
   data() {
     return {
       codeUrl: '',
+      cookiePass: '',
       loginForm: {
         username: 'admin',
         password: '123456',
@@ -84,6 +87,8 @@ export default {
       const username = Cookies.get('username')
       let password = Cookies.get('password')
       const rememberMe = Cookies.get('rememberMe')
+      // 保存cookie里面的加密后的密码
+      this.cookiePass = password === undefined ? '' : password
       password = password === undefined ? this.loginForm.password : password
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
@@ -94,7 +99,18 @@ export default {
     },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
-        const user = this.loginForm
+        const user = {
+          username: this.loginForm.username,
+          password: this.loginForm.password,
+          rememberMe: this.loginForm.rememberMe,
+          code: this.loginForm.code,
+          uuid: this.loginForm.uuid
+        }
+        console.log(this.cookiePass)
+        if (user.password !== this.cookiePass) {
+          user.password = encrypt(user.password)
+        }
+        console.log(user.password)
         if (valid) {
           this.loading = true
           if (user.rememberMe) {