1. 安装 crypto-js
npm i -S crypto-js
2. 配置 utils 加密工具函数
importCryptoJSfrom'crypto-js'; // 默认的 KEY 与后台一致，十六位十六进制数作为密钥constKEY=CryptoJS.enc.Utf8.parse('与后台一直的密钥'); exportdefault { // 加密EncryptData: data=> { letsrcs=CryptoJS.enc.Utf8.parse(data); letencrypted=CryptoJS.AES.encrypt(srcs, KEY, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7, }); returnencrypted.toString(); }, // 解密DecryptData: data=> { letdecrypt=CryptoJS.AES.decrypt(data, KEY, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7, }); returnJSON.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(asyncres=> { constresData=awaitres.clone().json(); constresponse=res.clone(); response.data=resData; if (process.env.NODE_ENV!=='development') { if (response.data.data) { // 数据解密response.data.data=AESUtil.DecryptData(response.data.data); } } returnresponse.data; });
