image.png
??需求：
之前的接口傳參基本上都是明文傳輸园担，但是最近的一個項目要求接口必須要使用 AES-CBC 進行加密栋豫。
包括 POST,GET,PUT,DELETE請求方式加密
因為之前的項目有用到過這種方式，所以我也就復(fù)制粘貼了??辉词，當(dāng)然也基于現(xiàn)有情況進行了封裝。你也可以 百度下網(wǎng)上的方案,你會發(fā)現(xiàn)和我這個也差不多况鸣。
??使用：
這里的 querystring 何乎，主要是用來把類似 GET,DELETE的請求參數(shù)由{id:1,name:'ivan'}轉(zhuǎn)化成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 方法的話，可以直接放到這里就行了
以上就是加密和解密的方法玲销，但是基于不同的請求方式输拇，需要不同處理參數(shù)的加密，以及方便的解密贤斜，下面我封裝了一個方法提供使用策吠，希望可以幫到你~
??請求處理封裝
這里是基于 axios 的請求方式進行的處理
//處理加密數(shù)據(jù)
/**
* method:get post put delete
* params:類似get的請求參數(shù)
* data:類似post的請求參數(shù)
* 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請求中的調(diào)用方法
import axios from 'axios'
import { handelEncryptedData } from '存放handelEncryptedData方法的js路徑'
// 創(chuàng)建一個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
})
// 響應(yīng)攔截器
service.interceptors.response.use(
response => {
//解密
let res = handelEncryptedData(response.data, 'decrypt')
...
return res
})
