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、前端的显示结果
前端打印了两次,上面是解密后的数据,下方是真正传输过来的数据

  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值