快捷導(dǎo)航

Vue密碼登陸加密RSA實(shí)現(xiàn)方案

更新時(shí)間：2024年07月25日 09:35:19 作者：我是+V

這篇文章主要介紹了Vue密碼登陸加密RSA實(shí)現(xiàn)方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue密碼登陸加密RSA方案

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

RSA是啥

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

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

RSA加密與解密

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

安裝依賴

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

npm install jsencrypt

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

使用

首先在頁(yè)面引用

import { JSEncrypt } from 'jsencrypt'

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

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

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

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

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

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

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

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

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

在Vue中使用步驟

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

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

如果前端要獲取后端傳過(guò)來(lái)的已經(jīng)加密后的字符串，并且解密使用，那么前端就需要拿到RSA對(duì)立面的私鑰進(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對(duì)象
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)目中的使用如下圖：