作為一個前端菜雞,今天碰到一個加密解密的坑,浪費了不少時間. 為了報仇,我決定再次拿起我的小本本,君子報仇十年不晚,先記下來.

先說坑,加密解密前端工作中很常見. 之前也加密過密碼賬戶之類的,一切都順暢無比,比如:

//vue中mounted: function() {let x = encryptDes("123", this.$enkey);//加密let x2 = decryptDes(x, this.$enkey); //解密console.log(x); console.log(x2); }

輸出結果:(看吧一切都那么順利)

?

就在今天當我加密要一個"對象"的時候......出現了問題:

?

let obj = {test: 123};console.log(JSON.stringify(obj));let x = encryptDes(JSON.stringify(obj), this.$enkey);let x2 = decryptDes(x, this.$enkey);console.log(x);console.log(x2);

?結果輸出了個這么個鬼東西:

?

?這不科學啊,由于菜雞是真的菜,導致我根本沒見過這鬼東西,百度完了,絲毫沒有線索,菜雞我開始懷疑人生,突然靈光一現,難道就因為菜雞我沒"對象" ? obj=null了?

問了哈旁邊后臺的一個同事.說應該字符串的編碼之類的問題 ,結果再用url解碼解了下真的有結果:(JS中對URL進行轉碼與解碼)

let obj = {test: 123};console.log(JSON.stringify(obj));let x = encryptDes(JSON.stringify(obj), this.$enkey);let x2 = decryptDes(x, this.$enkey);console.log(x);console.log(x2);console.log(unescape(x2));

果然不是obj=null的事.

附加密的封裝:

import cryptoJs from "crypto-js";function stringToHex(str){var val="";for(var i = 0; i < str.length; i++){if(val == "")val = str.charCodeAt(i).toString(16);elseval += "," + str.charCodeAt(i).toString(16);}return val;}//base64加密 export const encryptBase64 = (message)=>{var str = cryptoJs.enc.Utf8.parse(message);var encryptMsg = cryptoJs.enc.Base64.stringify(str);return encryptMsg }//base64解密 export const decryptBase64 = (message)=>{var decryptMsg = cryptoJs.enc.Base64.parse(message);var parseStr = decryptMsg.toString(cryptoJs.enc.Utf8);return parseStr }// DES加密密 export const encryptDes = (message, key) => {message = encodeURIComponent(message)key = encodeURIComponent(key)var keyHex = cryptoJs.enc.Utf8.parse(key)var ivHex = cryptoJs.enc.Utf8.parse(key)var option = {iv: ivHex, mode: cryptoJs.mode.CBC, padding: cryptoJs.pad.Pkcs7}var encrypted = cryptoJs.DES.encrypt(message, keyHex, option)var msg = (encrypted.ciphertext.toString())var b=msg.toUpperCase();return (b) }// DES解密 export const decryptDes = (message, key) => {var keyHex = cryptoJs.enc.Utf8.parse(key)var ivHex = cryptoJs.enc.Utf8.parse(key)var decrypted = cryptoJs.DES.decrypt({ciphertext: cryptoJs.enc.Hex.parse(message)},keyHex,{iv: ivHex,mode: cryptoJs.mode.CBC,padding: cryptoJs.pad.Pkcs7})return decrypted.toString(cryptoJs.enc.Utf8) }

?

總結

以上是生活随笔為你收集整理的前端数据的加密和解密--对象解密的坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。