一、目的

    最近工作中，前端联调后端接口请求的数据是 JSON 格式的明文，考虑到安全问题，与后端同事沟通协调后，规定前端采用 3DES 对请求数据加密，后端接收到请求后再用 3DES 进行解密。

二、效果图

 

三、具体实现

1、3DES 参数

    有加密模式、填充方式、偏移量、密码、字符集、输出格式参数，这些值的选定都是前后端沟通好后统一的，这样加密解密得到的内容才能一致。

 

 2、前端项目通过 npm 安装

npm install crypto-js --save

 

3、封装加密解密函数，写入文件 3DES.js 。这里示例用 utf8 字符集、 CBC 加密模式、Pkcs7 的填充方式、base64 的编码格式输出。 

import cryptoJs from 'crypto-js';

// 3DES 加密
export const encryptByDES = (dataStr, key, iv) => {
  const keyHex = cryptoJs.enc.Utf8.parse(key);
  const encrypted = cryptoJs.TripleDES.encrypt(dataStr, keyHex, {
    mode: cryptoJs.mode.CBC, // CBC模式
    padding: cryptoJs.pad.Pkcs7, // pkcs7padding 填充方式
    iv: cryptoJs.enc.Utf8.parse(iv) // 设置偏移量（若 ECB 模式则删除该行）
  });
  // return encrypted.ciphertext.toString(); // 返回 hex 编码格式
  return encrypted.toString(); // 返回 base64 编码格式
}

// 3DES 解密
export const decryptByDES = (ciphertext, key, iv) => {
  const keyHex = cryptoJs.enc.Utf8.parse(key);
  const decrypted = cryptoJs.TripleDES.decrypt({
    // ciphertext: cryptoJs.enc.Hex.parse(ciphertext) // hex 编码解密
    ciphertext: cryptoJs.enc.Base64.parse(ciphertext) // base64 编码解密
   }, keyHex, {
    mode: cryptoJs.mode.CBC, // CBC模式
    padding: cryptoJs.pad.Pkcs7, // pkcs7padding 填充方式
    iv: cryptoJs.enc.Utf8.parse(iv) // 设置偏移量（若 ECB 模式则删除该行）
  });
  return decrypted.toString(cryptoJs.enc.Utf8); // 返回 base64 编码格式
}

4、在需要调用的文件引入加密解密函数并调用，规定密码和偏移量。

import { encryptByDES, decryptByDES } from '@/utils/3DES';

const _key = 'abcdefg1234567812345678!';  // 密码
const _iv = '20210724';  // 偏移量


// 某处调用（通常要结合 axios/ajax 将加密后的结果去发送请求），data 为发送请求的 JSON 格式数据
    console.log('加密前的请求数据', data);
    let str1 = encryptByDES(JSON.stringify(data), _key, _iv);  // 把 JSON 格式数据转成字符串格式
    console.log('加密后的请求数据', str1);
    console.log('解密后的请求数据', decryptByDES(str1, _key, _iv));  // 测试解密后的数据是否和加密前数据一致

    这是我本人在工作学习中做的一些总结，同时也分享出来给需要的小伙伴哈 ~ 供参考学习，有什么建议也欢迎评论留言，转载请注明出处哈，感谢支持！