前端加密的方式还挺多的,这里就说一下我这次用到的des加密。
Vue 的项目先安装crypto-js 不是vue文件的可以直接引入项目即可,下载地址
执行命令
cnpm install crypto-js --save
可以封装成一个方法,然后这样就方便我们使用了,这里使用的ECB模式,直接上代码,
// DES 加密
// key 密钥是跟后端统一的
Vue.prototype.$encryptByDES = (message, key=store.state.desKey) => {
let keyHex = CryptoJS.enc.Utf8.parse(key);
let encrypted = CryptoJS.DES.encrypt(message, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
}
// 有的网上查的是 return encrypted.ciphertext.toString(),这样加密出来的是一个十六进制的字符串,看你们跟后盾的要求
// return encrypted.toString(); 返回值类似这样的格式 yp8KlHDcOWw=
// TripleDES 其实就是换了一种加密的方法,把CryptoJS.DES.encrypt 换成 CryptoJS.TripleDES.encrypt 即可,后端用的工具好像叫 DESede(说法不同,以免造成误差)
解密其实都差不多的
Vue.prototype.$decryptByDES = (ciphertext, key=store.state.desKey) => {
let keyHex = CryptoJS.enc.Utf8.parse(key);
let decrypted = CryptoJS.TripleDES.decrypt({
ciphertext: CryptoJS.enc.Base64.parse(ciphertext)
}, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
CBC 模式 (具体的可以网上查一查)
// 加密
Vue.prototype.$encryptByDES = (message, key=store.state.desKey, iv) => {
let keyHex = cryptoJs.enc.Utf8.parse(key)
let ivHex = cryptoJs.enc.Utf8.parse(iv)
let option = { iv: ivHex, mode: cryptoJs.mode.CBC, padding: cryptoJs.pad.Pkcs7 }
let encrypted = cryptoJs.DES.encrypt(message, keyHex, option)
return encrypted.ciphertext.toString()
}
// 解密
Vue.prototype.$decryptByDES = (ciphertext, key=store.state.desKey, iv) => {
let keyHex = cryptoJs.enc.Utf8.parse(key)
let ivHex = cryptoJs.enc.Utf8.parse(iv)
let 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)
}
网友评论