Vue密碼登陸加密RSA方案

有一個項(xiàng)目需求需要在前段登陸的時候把登錄密碼加密后發(fā)送，這個地方其實(shí)很簡單，加密的時候可以使用md5、可以使用sha1，也可以使用現(xiàn)在這個方式加密，就簡單記錄一下沒啥。

RSA是啥

RSA加密算法是一種 非對稱加密算法 ，RSA加密使用了"一對"密鑰.分別是公鑰和私鑰，這個公鑰和私鑰其實(shí)就是一組數(shù)字!

其二進(jìn)制位長度可以是1024位或者2048位.長度越長其加密強(qiáng)度越大，目前為止公之于眾的能破解的最大長度為768位密鑰，只要高于768位，相對就比較安全.所以目前為止，這種加密算法一直被廣泛使用.

RSA加密與解密

• 使用 公鑰 加密的數(shù)據(jù)，利用 私鑰 進(jìn)行解密。
• 使用 私鑰 加密的數(shù)據(jù)，利用 公鑰 進(jìn)行解密。

安裝依賴

vue使用rsa加密的時候首先需要安裝一個依賴，幫助我們實(shí)現(xiàn)加密操作。

npm install jsencrypt 

安裝完就可以用了，如果安裝失敗用 cnpm。

使用

首先在頁面引用

import { JSEncrypt } from 'jsencrypt'

創(chuàng)建一個方法，就是使用我們的密碼加密用的。

	passwordEncryption(passwordUser) {
        let publicKey = this.secretKey // 從后臺獲取公鑰，這個保存一下，在這里用。
        console.log('后臺公鑰---------> '， publicKey)
        let encryptor = new JSEncrypt()  // 新建JSEncrypt對象
        encryptor.setPublicKey(publicKey)  // 設(shè)置公鑰
        let passwordEncryp = encryptor.encrypt(passwordUser)  // 對密碼進(jìn)行加密
        return passwordEncryp
      }，

然后在需要加密的地方使用就可以了。

let pwd = this.passwordEncryption(this.inputForm.password)

Vue使用RSA加密解密加簽解簽，前端開發(fā)工作

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

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

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

在這個過程中，只有2次傳遞過程，第一次是A傳遞公鑰給B，第二次是B傳遞加密消息給A，即使都被敵方截獲，也沒有危險性，因?yàn)橹挥蠥的私鑰才能對消息進(jìn)行解密，防止了消息內(nèi)容的泄露。

在Vue中使用步驟

一般是客戶端初始化時訪問服務(wù)端時，服務(wù)端會生成一對RSA對，及公鑰和密鑰。

如果前端只需要將要傳給后端的數(shù)據(jù)進(jìn)行加密后傳輸，那么前端可以只要公鑰，通過公鑰對要傳輸?shù)膮?shù)進(jìn)行加密后把加密的字符串發(fā)給后端即可，后端自有辦法解密。

如果前端要獲取后端傳過來的已經(jīng)加密后的字符串，并且解密使用，那么前端就需要拿到RSA對立面的私鑰進(jìn)行解密后使用了。

使用步驟

1、安裝依賴

首先引入jsencrypt

npm install jsencrypt --save

2、在main.js中引入

import JsEncrypt from ‘jsencrypt'
Vue.prototype.$jsEncrypt = JsEncrypt

3、將加密解密方法封裝到通用的js內(nèi)

let publicKey = ‘這里是封裝的公鑰'
let privateKey = ‘這里是封裝的私鑰'
//加密方法
RSAencrypt(pas){
//實(shí)例化jsEncrypt對象
let jse = new JSEncrypt();
//設(shè)置公鑰
jse.setPublicKey(publicKey);
console.log(‘加密：'+jse.encrypt(pas))
return jse.encrypt(pas);
},
//解密方法
RSAdecrypt(pas){
let jse = new JSEncrypt();
// 私鑰
jse.setPrivateKey(privateKey)
console.log(‘解密：'+jse.decrypt(pas))
return jse.decrypt(pas);
},

我在項(xiàng)目中的使用如下圖：

運(yùn)行結(jié)果

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論