CryptoJS

image.png

🎈需求：

之前的接口传参基本上都是明文传输，但是最近的一个项目要求接口必须要使用 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
})