前端AES加解密
採用的是 AES
+ BASE64
演算法加密~
網上關於 AES
對稱加密的演算法介紹挺多的,對這一塊還不是特別理解的小夥伴可自行百度,這裡我推薦一篇AES加密演算法的詳細介紹與實現,講的還是蠻詳細的~
具體實現
其實搞懂了是怎麼一回事,做起來還是挺簡單的,因為庫都是現成的,我們只需要會用就好啦,這裡我在推薦一篇理解AES加密解密的使用方法,加深大家對 AES
演算法的理解~
以 Vue
作為例子,其他的也就大同小異了~
-
要用
AES
crypto-js
,crypto-js
是一個純javascript
寫的加密演算法類庫 ,可以非常方便地在javascript
進行MD5
、SHA1
、SHA2
、SHA3
、RIPEMD-160
雜湊雜湊,進行AES
、DES
、Rabbit
、RC4
、Triple 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"}