前端数据的加密和解密--对象解密的坑

作为一个前端菜鸡,今天碰到一个加密解密的坑,浪费了不少时间. 为了报仇,我决定再次拿起我的小本本,君子报仇十年不晚,先记下来.

先说坑,加密解密前端工作中很常见. 之前也加密过密码账户之类的, 一切都顺畅无比,比如:

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

输出结果:(看吧一切都那么顺利)

就在今天当我加密要一个 "对象" 的时候......出现了问题:

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

结果输出了个这么个鬼东西:

这不科学啊,由于菜鸡是真的菜,导致我根本没见过这鬼东西,百度完了,丝毫没有线索,菜鸡我开始怀疑人生,突然灵光一现,难道就因为菜鸡我没 "对象" ? obj=null了?

问了哈旁边后台的一个同事.说应该字符串的编码之类的问题 ,结果再用url解码解了下真的有结果:( JS中对URL进行转码与解码 )

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

果然不是obj=null的事.

附加密的封装:

importcryptoJsfrom"crypto-js";functionstringToHex(str){varval="";for(vari =0; i < str.length; i++){if(val =="")　　　　　　　　val = str.charCodeAt(i).toString(16);elseval +=","+ str.charCodeAt(i).toString(16);　　　　}returnval;　　}//base64加密exportconstencryptBase64 =(message)=>{varstr = cryptoJs.enc.Utf8.parse(message);varencryptMsg = cryptoJs.enc.Base64.stringify(str);returnencryptMsg}//base64解密exportconstdecryptBase64 =(message)=>{vardecryptMsg = cryptoJs.enc.Base64.parse(message);varparseStr = decryptMsg.toString(cryptoJs.enc.Utf8);returnparseStr}// DES加密密exportconstencryptDes =(message, key) =>{  message =encodeURIComponent(message)  key =encodeURIComponent(key)varkeyHex = cryptoJs.enc.Utf8.parse(key)varivHex = cryptoJs.enc.Utf8.parse(key)varoption = {iv: ivHex,mode: cryptoJs.mode.CBC,padding: cryptoJs.pad.Pkcs7}varencrypted = cryptoJs.DES.encrypt(message, keyHex, option)varmsg = (encrypted.ciphertext.toString())varb=msg.toUpperCase();return(b)}// DES解密exportconstdecryptDes =(message, key) =>{varkeyHex = cryptoJs.enc.Utf8.parse(key)varivHex = cryptoJs.enc.Utf8.parse(key)vardecrypted = cryptoJs.DES.decrypt(    {ciphertext: cryptoJs.enc.Hex.parse(message)    },    keyHex,    {iv: ivHex,mode: cryptoJs.mode.CBC,padding: cryptoJs.pad.Pkcs7    }  )returndecrypted.toString(cryptoJs.enc.Utf8)}

如果有想学习编程的初学者，可来我们的前端直播授课群的哦：571671034里面免费送整套系统的前端教程！