vue項(xiàng)目中使用AES實(shí)現(xiàn)密碼加密解密（ECB和CBC兩種模式）
vue項(xiàng)目中使用AES實(shí)現(xiàn)密碼加密解密
區(qū)別
ECB：是一種基礎(chǔ)的加密方式，密文被分割成分組長(zhǎng)度相等的塊（不足補(bǔ)齊），然后單獨(dú)一個(gè)個(gè)加密，一個(gè)個(gè)輸出組成密文。
CBC：是一種循環(huán)模式，前一個(gè)分組的密文和當(dāng)前分組的明文異或或操作后再加密，這樣做的目的是增強(qiáng)破解難度。（不容易主動(dòng)攻擊，安全性好于ECB，是SSL、IPSec的標(biāo)準(zhǔn)）
代碼實(shí)現(xiàn)
先安裝 crypto-js
npm install crypto-js --save-dev
ECB模式：
import CryptoJS from "crypto-js";
export default {
// 加密
encrypt(word, keyStr) {
keyStr = keyStr ? keyStr : "absoietlj32fai12";
let key = CryptoJS.enc.Utf8.parse(keyStr);
let srcs = CryptoJS.enc.Utf8.parse(word);
let encrypted = CryptoJS.AES.encrypt(srcs, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
},
// 解密
decrypt(word, keyStr) {
keyStr = keyStr ? keyStr : "absoietlj32fai12";
var key = CryptoJS.enc.Utf8.parse(keyStr);
var decrypt = CryptoJS.AES.decrypt(word, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}
};
CBC模式：
import CryptoJS from "crypto-js";
export default {
// 加密
encrypt(word, keyStr, ivStr) {
keyStr = keyStr ? keyStr : "absoietlj32fai12";
ivStr = ivStr ? ivStr : "absoietlj32fai12";
let key = CryptoJS.enc.Utf8.parse(keyStr);
let iv = CryptoJS.enc.Utf8.parse(ivStr);
let srcs = CryptoJS.enc.Utf8.parse(word);
let encrypted = CryptoJS.AES.encrypt(srcs, key, {
iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.ZeroPadding
});
return encrypted.toString();
},
// 解密
decrypt(word, keyStr, ivStr) {
keyStr = keyStr ? keyStr : "absoietlj32fai12";
ivStr = ivStr ? ivStr : "absoietlj32fai12";
var key = CryptoJS.enc.Utf8.parse(keyStr);
let iv = CryptoJS.enc.Utf8.parse(ivStr);
var decrypt = CryptoJS.AES.decrypt(word, key, {
iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.ZeroPadding
});
return decrypt.toString(CryptoJS.enc.Utf8);
}
};
以上兩種模式中的 keyStr 的長(zhǎng)度要不小于14位，否則解密時(shí)會(huì)顯示空白
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目中使用AES實(shí)現(xiàn)密碼加密解密（ECB和CBC兩種模式）,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了淺析vue中的MVVM實(shí)現(xiàn)原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
基于前端VUE+ElementUI實(shí)現(xiàn)table行上移或下移功能(支持跨頁(yè)移動(dòng))
有時(shí)候需要前端實(shí)現(xiàn)上移和下移功能,下面這篇文章主要給大家介紹了關(guān)于如何基于前端VUE+ElementUI實(shí)現(xiàn)table行上移或下移(支持跨頁(yè)移動(dòng))的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
ref用來(lái)輔助我們獲取DOM元素或組件的引用實(shí)例對(duì)象,每個(gè)vue的組件實(shí)例上,都包含一個(gè)refs對(duì)象,里面存儲(chǔ)著對(duì)應(yīng)的DOM元素或組件的引用,默認(rèn)情況下,組件的refs指向一個(gè)空對(duì)象2023-03-03
Animate.css這個(gè)動(dòng)畫(huà)庫(kù),很多的動(dòng)畫(huà)在這個(gè)庫(kù)里面都定義好了,我們用的時(shí)候可以直接使用里面的類(lèi)名就可以,下面我們就來(lái)看看如何在vue項(xiàng)目中使用Animate.css吧2023-08-08
el-table 表格最大高度max-height的問(wèn)題解決
在工作中遇到了多個(gè)滾動(dòng)條的情況,是因?yàn)閑l-table的max-height設(shè)置為固定值導(dǎo)致的,本文主要介紹了el-table 表格最大高度max-height的問(wèn)題解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-07-07
Vue生產(chǎn)和開(kāi)發(fā)環(huán)境如何切換及過(guò)濾器的使用
本文主要介紹了Vue生產(chǎn)、開(kāi)發(fā)環(huán)境如何切換及過(guò)濾器的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Element框架el-tab點(diǎn)擊標(biāo)簽頁(yè)時(shí)再渲染問(wèn)題的解決
本文主要介紹了Element框架el-tab點(diǎn)擊標(biāo)簽頁(yè)時(shí)再渲染問(wèn)題的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
手把手教你如何創(chuàng)建一個(gè)VUE項(xiàng)目(超簡(jiǎn)單)
這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建一個(gè)VUE項(xiàng)目的相關(guān)資料,創(chuàng)建vue項(xiàng)目有很多種方式,這里給大家介紹一種非常簡(jiǎn)單的方法,需要的朋友可以參考下2023-08-08
使用Vue 實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼功能
本文章主要來(lái)介紹一下第一個(gè)階段，也就是前端校驗(yàn)的驗(yàn)證碼的實(shí)現(xiàn)，下面來(lái)介紹一下拖動(dòng)驗(yàn)證碼的具體實(shí)現(xiàn)。這篇文章主要介紹了利用 Vue 實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼,需要的朋友可以參考下2019-06-06
基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果
在vue項(xiàng)目中,我們通常會(huì)使用Axios來(lái)與后臺(tái)進(jìn)行數(shù)據(jù)交互,而當(dāng)我們發(fā)起請(qǐng)求時(shí),常常需要在頁(yè)面上顯示一個(gè)加載框（Loading）,然后等數(shù)據(jù)返回后自動(dòng)將其隱藏,本文介紹了基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果,需要的朋友可以參考下2024-03-03