場(chǎng)景

前端使用Vue在進(jìn)行登錄時(shí)，需要將密碼存進(jìn)cookie中。

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

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

RSA加密是一種非對(duì)稱加密?？梢栽诓恢苯觽鬟f密鑰的情況下，完成解密。這能夠確保信息的安全性，避免了直接傳遞密鑰所造成的被破解的風(fēng)險(xiǎn)。是由一對(duì)密鑰來(lái)進(jìn)行加解密的過(guò)程，分別稱為公鑰和私鑰。兩者之間有數(shù)學(xué)相關(guān)，該加密算法的原理就是對(duì)一極大整數(shù)做因數(shù)分解的困難性來(lái)保證安全性。通常個(gè)人保存私鑰，公鑰是公開(kāi)的（可能同時(shí)多人持有）。

加密過(guò)程

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

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

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

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

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

首先在Vue項(xiàng)目中的package.json中添加插件

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

然后

npm install

安裝依賴

在項(xiàng)目目錄下新建utils目錄，在目錄下新建jsencrypt.js

import JSEncrypt from 'jsencrypt/bin/jsencrypt'const publicKey = ''const privateKey = ''// 加密 export function encrypt(txt) {const encryptor = new JSEncrypt()encryptor.setPublicKey(publicKey) // 設(shè)置公鑰return encryptor.encrypt(txt) // 對(duì)需要加密的數(shù)據(jù)進(jìn)行加密 }// 解密 export function decrypt(txt) {const encryptor = new JSEncrypt()encryptor.setPrivateKey(privateKey)return encryptor.decrypt(txt) }

這樣就封裝好了進(jìn)行加解密的工具類方法。

下面就是生成用語(yǔ)加解密時(shí)的公鑰和私鑰。

這里直接使用在線生成的網(wǎng)站

http://web.chacuo.net/netrsakeypair

?

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

假如這里是在登錄時(shí)對(duì)密碼進(jìn)行加密，那么在login.vue中

引入加解密的方法

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

然后在點(diǎn)擊了記住密碼后，將密碼加密存入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時(shí)就可以調(diào)用解密方法獲取密碼。

??? 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)};},

?

?

總結(jié)

以上是生活随笔為你收集整理的Vue中前端加密使用RSA加密下的JSEncrypt防止明文暴露的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。