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