vue中如何使用crypto-js，进行3DES的加密解密（实践好用）

需求背景

项目中后端要求前端请求后台接口时对请求参数进行加密处理。
因为我的需求是加密可逆，后端要求使用3DES加解密，最后返回返回base64格式
加密过得，传给后端，后端再进行解密。

什么是3DES？？

3DES（即Triple DES）是DES向AES过渡的加密算法，它使用3条56位的密钥对数据进行三次加密。是DES的一个更安全的变形。原版DES容易被破解，新的3DES出现，增加了加密安全性,避免被暴力破解。它同样是对称性加密，同样涉及到加密编码方式，及填充方式。
它以DES为基本模块，通过组合分组方法设计出分组加密算法。比起最初的DES，3DES更为安全。

解决过程

1. npm下载js包 ；Crypto里面可以把md5和3des一起做了，所以直接安装这个比较方便

npm i crypto-js

2. 在 util.js引入新建 crypto.js 文件，对加密解密文件进行封装

message: 需要加解密的文本
key1: 加解密的秘钥
iv1: 偏移量，最短8位数，ECB模式不需要此参数

import cryptoJs from 'crypto-js';

//随机生成指定数量的16进制key
export const generatekey = (num) => {
    let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let key = "";
    for (var i = 0; i < num; i++) {
        let randomPoz = Math.floor(Math.random() * library.length);
        key += library.substring(randomPoz, randomPoz + 1);
    }
    return key;
}
// DES(CBC)加密
export const encryptByCBC = function (message, key1, iv1) {
    let key = cryptoJs.enc.Utf8.parse(key1);
    let iv = cryptoJs.enc.Utf8.parse(iv1);
    let srcs = cryptoJs.enc.Utf8.parse(message);
    // 加密模式为CBC，补码方式为PKCS5Padding（也就是PKCS7）
    let encrypted = cryptoJs.TripleDES.encrypt(srcs, key, {
            iv: iv,
            mode: cryptoJs.mode.CBC,
            padding: cryptoJs.pad.Pkcs7
    });
    return cryptoJs.enc.Base64.stringify(encrypted.ciphertext);   //返回base64
}

// DES(CBC)解密
export const decryptByCBC = function (message, key1, iv1) {
    let key = cryptoJs.enc.Utf8.parse(key1);
    let iv = cryptoJs.enc.Utf8.parse(iv1);
    let base64 = cryptoJs.enc.Base64.parse(message);
    let src = cryptoJs.enc.Base64.stringify(base64);
    // 解密模式为CBC，补码方式为PKCS5Padding（也就是PKCS7）
    let decrypt = cryptoJs.TripleDES.decrypt(src, key, {
            iv: iv,
            mode: cryptoJs.mode.CBC,
            padding: cryptoJs.pad.Pkcs7
    });
    let decryptedStr = decrypt.toString(cryptoJs.enc.Utf8);
    return decryptedStr.toString();
  }


export default {
    encryptByCBC,
    decryptByCBC,
}

3. 用的时候在相应的js文件里引入

import crypto from "@/utils/crypto.js";
var key = "xxxxxxxxx";
var iv = "xxx_xxxx";
var en_str = crypto.encryptByCBC(json_arr, key, iv);  //json_arr是要加密的内容
console.log('加密' + en_str);
var de_str = crypto.decryptByCBC(en_str, key, iv);
console.log('解密' + de_str);

需要注意的是：
加密时候需要对字符串加密，var json_arr = JSON.stringify(arr); //js对象转为JSON字符串
解密时候需要转为对象，this.de_str = JSON.parse(this.de_str); //JSON字符串转为一个对象

另外，做的过程中一开始我用的是DES加解密得cryptoJs.DES，后来在后端同事的提醒下更换成了3EDS的，唯一的区别就是这个可恶的cryptoJs.TripleDES

分享资料

分享一个可以自测加解密是否成功的工具网站，只需要按需求选择好，在输入待加解密的文本就好
http://tool.chacuo.net/crypt3des

附上做的过程中参考过不错的文章，希望也对大家有所帮助
关于 vue中使用crypto-js，进行DES 的加密解密
vue项目加密之CBC加密