Vue中前端加密使用RSA加密下的JSEncrypt防止明文暴露

場景

前端使用Vue在進行登錄時，需要將密碼存進cookie中。

為了防止密碼明文暴露，前端需要采用加密方式對密碼進行加密。

常用加密方式之一就是RSA加密解密。

RSA加密是一種非對稱加密。可以在不直接傳遞密鑰的情況下，完成解密。這能夠確保信息的安全性，避免了直接傳遞密鑰所造成的被破解的風險。是由一對密鑰來進行加解密的過程，分別稱為公鑰和私鑰。兩者之間有數學相關，該加密算法的原理就是對一極大整數做因數分解的困難性來保證安全性。通常個人保存私鑰，公鑰是公開的（可能同時多人持有）。

加密過程

（1）A生成一對密鑰（公鑰和私鑰），私鑰不公開，A自己保留。公鑰為公開的，任何人可以獲取。

（2）A傳遞自己的公鑰給B，B用A的公鑰對消息進行加密。

（3）A接收到B加密的消息，利用A自己的私鑰對消息進行解密。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

前端使用RSA加密的常用的就是JSEncrypt。

首先在Vue項目中的package.json中添加插件

  "dependencies": {
    "jsencrypt": "3.0.0-rc.1",

然后

npm install

安裝依賴

在項目目錄下新建utils目錄，在目錄下新建jsencrypt.js

import JSEncrypt from 'jsencrypt/bin/jsencrypt'


const publicKey = ''

const privateKey = ''

// 加密
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)
}

 

這樣就封裝好了進行加解密的工具類方法。

下面就是生成用語加解密時的公鑰和私鑰。

這里直接使用在線生成的網站

http://web.chacuo.net/netrsakeypair

 

 

然后將生成的公鑰和私鑰放在上面的js中的對應的位置，那么就可以使用這對去進行加解密。

假如這里是在登錄時對密碼進行加密，那么在login.vue中

引入加解密的方法

import { encrypt, decrypt } from '@/utils/jsencrypt'

然后在點擊了記住密碼后，將密碼加密存入cookie

          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          }

那么在獲取cookie時就可以調用解密方法獲取密碼。

    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },