Vue和Springbooot项目 前后端AES加密、解密

Vue和Springbooot项目 前后端AES加密、解密

前言：对于 前后端的数据加密传输这一块，查阅了许多的文档，也试了很久，最终完成。也分享给大家。需要 会一点vue基础、java基础。
1.1
在vue中的项目中，需要添加的组件是 axios 和 crypto-js两个组件。
axisos 用于发送 请求，crypto-js 用于 对数据进行加密和解密。

1.2. 在vue项目中创建 secret.js 内容如下
1.3

const CryptoJS = require('crypto-js');  //引用AES源码js
const key = CryptoJS.enc.Utf8.parse("0123456789ABHAEQ");  //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('DYgjCEIMVrj2W9xN');   //十六位十六进制数作为密钥偏移量

//解密方法
function Decrypt(word) {
    let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
}

//加密方法
function Encrypt(word) {
    let srcs = CryptoJS.enc.Utf8.parse(word);
    let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    return encrypted.ciphertext.toString();

}
export default {
    Decrypt,
    Encrypt
}

1.4
axios请求时代码

   axios
        .post(
          "http://localhost:8081/xyb/dd",
        // 数据加密传输前原文
          secret.Encrypt(
            "Hutool是项目中“util”包友好的替代，它节省了开发人员对项目中公用类和公用工具方法的封装时间，使开发专注于业务，同时可以最大限度的避免封装不完善带来的bug。Hutool是项目中“util”包友好的替代，它节省了开发人员对项目中公用类和公用工具方法的封装时间，使开发专注于业务，同时可以最大限度的避免封装不完善带来的bug。Hutool是项目中“util”包友好的替代，它节省了开发人员对项目中公用类和公用工具方法的封装时间，使开发专注于业务，同时可以最大限度的避免封装不完善带来的bug。Hutool是项目中“util”包友好的替代，它节省了开发人员对项目中公用类和公用工具方法的封装时间，使开发专注于业务，同时可以最大限度的避免封装不完善带来的bug。Hutool是项目中“util”包友好的替代，它节省了开发人员对项目中公用类和公用工具方法的封装时间，使开发专注于业务，同时可以最大限度的避免封装不完善带来的bug。Hutool是项目中“util”包友好的替代，它节省了开发人员对项目中公用类和公用工具方法的封装时间，使开发专注于业务，同时可以最大限度的避免封装不完善带来的bug。Hutool是项目中“util”包友好的替代，它节省了开发人员对项目中公用类和公用工具方法的封装时间，使开发专注于业务，同时可以最大限度的避免封装不完善带来的bug。Hutool是项目中“util”包友好的替代，它节省了开发人员对项目中公用类和公用工具方法的封装时间，使开发专注于业务，同时可以最大限度的避免封装不完善带来的bug。Hutool是项目中“util”包友好的替代，它节省了开发人员对项目中公用类和公用工具方法的封装时间，使开发专注于业务，同时可以最大限度的避免封装不完善带来的bug。"
          )
        )
        .then(
          (response) => {
          //请求数据 解密后
            console.log("请求成功", secret.Decrypt(response.data));
          //请求数据 
            console.log("请求成功", response.data);
            this.name = response.data.three;
          },
          (error) => {
            console.log("请求失败", error.message);
          }
        );

1.5
、此时前端准备好发送到后端的数据，同时 也会请求到后端的 数据，请求的数据也是 加密后的。
注意的是
1】前后端使用的 加密模式、偏移量、秘钥、盐 需要一致。
2】前端发送到后端的数据中，需要进行字符的替换（用空字符 替换 所有的 等号）后，才能解密，否则会解密失败。
1.6
后端代码

@ResponseBody
    @PostMapping("/dd")
    public String dst(@RequestBody String data) {
        /*前后端一致的 加密准则*/
        AES aes = new AES("CBC", "PKCS7Padding",
                // 密钥，可以自定义
                "0123456789ABHAEQ".getBytes(),
                // iv加盐，按照实际需求添加
                "DYgjCEIMVrj2W9xN".getBytes());
        /*encryptHex 后端aes加密 方法*/
        String encryptHex = aes.encryptHex("123");
        /*后端解密方法 decryptStr*/
        String decryptStr = aes.decryptStr(encryptHex);
        System.out.println("前端 " + data);
        System.out.println("后端 " + encryptHex);
        /*去除前端 加密时 产生的差异化（用空字符 替换 所有的 等号）*/
        final String replace = data.replace("=", "");
        /*解密前端数据*/
        String decryptStr1 = aes.decryptStr(replace);
        System.out.println("后端二次解密 decryptStr1 " + decryptStr1);

        LinkedHashMap<Object, Object> map = new LinkedHashMap<>();
        map.put("one", 1);
        map.put("two", 2);
        map.put("three", 3);
         //加密数据后返回前端         
        final String encodeMap = aes.encryptHex(JSON.toJSONString(map));
        return encodeMap;
    }

1.7、后端处理加密数据时，用的是hutool工具包。
1.8、实验结果

1.9、前端的显示结果