前端AES加解密


采用的是 AES + BASE64 算法加密~

網上關於 AES 對稱加密的算法介紹挺多的,對這一塊還不是特別理解的小伙伴可自行百度,這里我推薦一篇AES加密算法的詳細介紹與實現,講的還是蠻詳細的~

具體實現

其實搞懂了是怎么一回事,做起來還是挺簡單的,因為庫都是現成的,我們只需要會用就好啦,這里我在推薦一篇理解AES加密解密的使用方法,加深大家對 AES 算法的理解~

 
 
 

Vue 作為例子,其他的也就大同小異了~

  • 要用 AES 算法加密,首先我們要引入 crypto-jscrypto-js 是一個純 javascript 寫的加密算法類庫 ,可以非常方便地在 javascript 進行 MD5SHA1SHA2SHA3RIPEMD-160 哈希散列,進行 AESDESRabbitRC4Triple DES 加解密,我們可以采用 npm install crypto-js --save 進行下載安裝,也可以直接去 GitHub下載源碼~

  • 其次我們需要定義兩個方法 ,分別是用於加密和解密,這里我將它放在了 utils 文件夾下,命名為 secret.js ,其具體代碼如下:

    const CryptoJS = require('crypto-js'); //引用AES源碼js const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六進制數作為密鑰 const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412'); //十六位十六進制數作為密鑰偏移量 //解密方法 function Decrypt(word) { let encryptedHexStr = CryptoJS.enc.Hex.parse(word); let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr); let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8); return decryptedStr.toString(); } //加密方法 function Encrypt(word) { let srcs = CryptoJS.enc.Utf8.parse(word); let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return encrypted.ciphertext.toString().toUpperCase(); } export default { Decrypt , Encrypt } 

上面的代碼中的 key 是密鑰 ,iv 是密鑰偏移量,這個一般是接口返回的,為了方便,我們這里就直接在這里定義了。

值得注意的是密鑰的長度,由於對稱解密使用的算法是 AES-128-CBC算法,數據采用 PKCS#7 填充 , 因此這里的 key 需要為16位!

接着我們定義了 解密方法Decrypt加密方法 Encrypt ,最后通過 export default 將其暴露出去,方便在需要的時候進行引入~

ok,核心代碼就這么多,是不是很簡單啊,其實也么有你想的那么復雜哈,剩下的就是展示一下如何使用咯~

 
 
 

示例

這里我定義了一個 index.vue 用來展示數據加解密的操作~

加密操作: 假設我們現在要給后端發送一段文字,暫且定義為 This is a clear text , 在發送之前我們需要對其進行加密操作,這時候我們可以調用上面介紹的 Encrypt 方法,通過加密后我們可以得到密文為:4ACEA01505ADAF9FB59A03B22FC1EF1B244AE28DDACFDFAEFA7E263655C44357

 
 

解密操作: 假設我們請求后端接口,后端返回了我們一堆如下的字符串 BBFE62335C28821AD2F4043B715BB0C3E45734908254666526DCFD86A605F3AF , 這讓我很蒙蔽啊,這時候就要調用 Decrypt 方法,
通過解密我們可以拿到后端返回的信息其實是:{"name":"Chris","sex":"male"}

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM