場景

前端使用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)
      };
    },