前言

在很多项目中涉及到信息敏感问题，为防止http信息传输时参数被劫持进行二次传输的尴尬局面，最好使用前端加密参数请求，后端解密，返回数据时后端加密，前端解密。防止信息被盗取。目前主流的加密方式有：（对称加密）AES、DES （非对称加密）RSA、DSA，关于前端加解密的方案一般都是选用crypto-js的比较多。本文主要讲aes加密

在vue中使用crypto-js加解密时直接通过npm包。

1、npm install crypto-js
2、import CryptoJS from 'crypto-js'  
3、封装在公共的js中，方便每次http请求时调用

在react中也是这样，so 在小程序中也是如此？

的确百度一下确实都是这样的解决方案，但是笔者通过动手发现报错了！错误信息是这样的

RangeError: Maximum call stack size exceeded  堆栈溢出。
为什么vue/react都可以，同样是基于js的小程序不行啊，据了解以前是没问题的，
后面小程序基础库更新版本以后就不行了。那么还有没有其他方法勒？

接着往下看，既然npm包不行，那你就直接下载它啊。下载地址

使用方式就是上面的第二步以后差不多了，新建一个js文件

const CryptoJS = require('crypto.js');
const aecConfig = {
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
}
//加密方法
function AES_EN(text, key, iv) {
    key = CryptoJS.enc.Utf8.parse(key)
    iv = CryptoJS.enc.Utf8.parse(iv)
    const encrypted = CryptoJS.AES.encrypt(text, key, { iv, ...aecConfig })
    return encrypted.ciphertext.toString()
}

//解密方法
function AES_DE(text, key, iv) {
    key = CryptoJS.enc.Utf8.parse(key)
    iv = CryptoJS.enc.Utf8.parse(iv)
    text = CryptoJS.enc.Hex.parse(text)
    const decrypt = CryptoJS.AES.decrypt({ ciphertext: text }, key, { iv, ...aecConfig })
    const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
    return decryptedStr.toString()
}
export {
    AES_EN, AES_DE
}

调用方式

在公共的http发起请求处引入刚刚新建的js文件
请求参数加密
返回结果解密

举个栗子

const crypto = require('../crypto/index.js');
let params = {
    a: 1,
    b: 2
}
let data = JSON.stringify(params)
//参数加密
data = crypto.AES_EN(data, 'key(加密的key)', 'xxxxxxx(AES加密偏移量)')
wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data,
  success (res) {
    //返回结果解密
    let obj = JSON.parse(crypto.AES_DE(res.data, 'key(解密的key)', 'xxxxxxx(AES解密偏移量)')) 
    console.log(obj)
  }
})

至此小程序的aes加解密就完成了