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