使用AES加密工具对请求加密
简介: 日常开发中,数据请求的加解密是比较常见的场景,因为数据传输的安全是非常必要的。AES是比较常见和常用的一种请求加密方案,属于对称加密的一种,优点是对数据没有长度限制,加解密速度快;实现方式简单;缺点是没那么安全:秘钥的传输及保管是个问题,任何一方的秘钥泄漏都将导致数据的不安全
1. 安装 crypto-js
npm i -S crypto-js
2. 配置 utils 加密工具函数
import CryptoJS from 'crypto-js';
// 默认的 KEY 与后台一致,十六位十六进制数作为密钥
const KEY = CryptoJS.enc.Utf8.parse('与后台一直的密钥');
export default {
// 加密
EncryptData: data => {
let srcs = CryptoJS.enc.Utf8.parse(data);
let encrypted = CryptoJS.AES.encrypt(srcs, KEY, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
});
return encrypted.toString();
},
// 解密
DecryptData: data => {
let decrypt = CryptoJS.AES.decrypt(data, KEY, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
});
return JSON.parse(CryptoJS.enc.Utf8.stringify(decrypt).toString());
},
};
3. 使用
在Vue工程或React工程中,通常是在请求工具(axios,umi-request/fetch或其他请求工具)中全局配置,以下已 umi-request
为例:
1. 在请求拦截器中对请求的数据体进行加密
request.interceptors.request.use((url, options) => {
if (process.env.NODE_ENV !== 'development') {
if (options.method === 'post' && !url.includes('generatorToken')) {
/**
* 数据加密,如果是json,需要先转换成字符串
* 这里是对整个json进行加密,也可以对单个字段进行加密
*/
options.data = AESUtil.EncryptData(JSON.stringify(options.data));
}
}
return { url, options };
});
2. 在响应拦截器中对返回的数据体进行解密
request.interceptors.response.use(async res => {
const resData = await res.clone().json();
const response = res.clone();
response.data = resData;
if (process.env.NODE_ENV !== 'development') {
if (response.data.data) {
// 数据解密
response.data.data = AESUtil.DecryptData(response.data.data);
}
}
return response.data;
});