需求:
之前的接口传参基本上都是明文传输,但是最近的一个项目要求接口必须要使用 AES-CBC 进行加密。
包括 POST,GET,PUT,DELETE请求方式加密
因为之前的项目有用到过这种方式,所以我也就复制粘贴了,当然也基于现有情况进行了封装。你也可以 百度下网上的方案,你会发现和我这个也差不多。
使用:
这里的 querystring ,主要是用来把类似 GET,DELETE
的请求参数由{id:1,name:'ivan'}
转化成id=1&name=ivan
进而再进行加密
npm install crypto-js --save
npm install querystring --save
import CryptoJS from 'crypto-js';
import qs from 'querystring';
const key = "密钥"; //后端给出的密钥
const iv = '密钥偏移量'; //后端给出的密钥偏移量
//加密方法
export function Encrypt(text) {
var srcs = CryptoJS.enc.Utf8.parse(text);
var encrypted = CryptoJS.AES.encrypt(srcs, CryptoJS.enc.Utf8.parse(key), {
iv: CryptoJS.enc.Utf8.parse(iv),
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
})
return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}
//解密方法
export function Decrypt(text) {
let baseResult = CryptoJS.enc.Base64.parse(text); // Base64解密
let ciphertext = CryptoJS.enc.Base64.stringify(baseResult); // Base64解密
let decryptResult = CryptoJS.AES.decrypt(ciphertext, CryptoJS.enc.Utf8.parse(key), { // AES解密
iv: CryptoJS.enc.Utf8.parse(iv),
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
let resData = decryptResult.toString(CryptoJS.enc.Utf8).toString();
return resData;
}
// 有使用到下面的 handelEncryptedData 方法的话,可以直接放到这里就行了
以上就是加密和解密的方法,但是基于不同的请求方式,需要不同处理参数的加密,以及方便的解密,下面我封装了一个方法提供使用,希望可以帮到你~
请求处理封装
这里是基于 axios 的请求方式进行的处理
//处理加密数据
/**
* method:get post put delete
* params:类似get的请求参数
* data:类似post的请求参数
* type:decrypt 解密 encrypt 加密
* url:类似get的请求路径 ?拼接
*/
export function handelEncryptedData({ method, url, params, data }, type) {
//加密
if (type == 'encrypt') {
let encryptionData = ''
//如果是get或者delete请求方式,加密方式不一样
if (method == 'get' || method == 'delete') {
if (params) {
encryptionData = Encrypt(qs.stringify(params))
url = `${url}?${encryptionData}`
// 加密后需要置空 params 否则仍然会默认拼接到url上
params = undefined
}
return { url, params }
} else {
// post put 请求方式加密
encryptionData = Encrypt(JSON.stringify(data))
data = encryptionData
return { data }
}
} else {
// 解密
let decryptData = JSON.parse(Decrypt(arguments[0]))
return decryptData
}
}
在axios请求中的调用方法
import axios from 'axios'
import { handelEncryptedData } from '存放handelEncryptedData方法的js路径'
// 创建一个axios实例
const service = axios.create({ ... })
// 请求拦截器
service.interceptors.request.use(
config => {
...
// 加密
const { url, params, data } = handelEncryptedData(config, 'encrypt')
if (config.method == 'get' || config.method == 'delete') {
config.url = url
config.params = params
} else {
config.data = data
}
return config
})
// 响应拦截器
service.interceptors.response.use(
response => {
//解密
let res = handelEncryptedData(response.data, 'decrypt')
...
return res
})