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、前端的显示结果