前端AES加解密crypto-js，接口加密请求

前端使用加解密工具crypto-js第三方插件，根据与后端约束的密钥，对接口请求以及获取的数据进行AES以及模式为ECB的加解密操作：

npm install crypto-js --save

下载完成之后在utils工具类创建js文件，如下

import CryptoJS from 'crypto-js'

const AES_KEY = 'AES_KEY_1234567890123456'
// 加密函数
function encrypt(data) {
  const key = CryptoJS.enc.Utf8.parse(AES_KEY)
  const encrypted = CryptoJS.AES.encrypt(JSON.stringify(data), key, {
    iv: CryptoJS.enc.Utf8.parse(key),
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  })
  return encrypted.toString()
}

// 解密函数
function decrypt(data) {
  const key = CryptoJS.enc.Utf8.parse(AES_KEY)
  const decrypted = CryptoJS.AES.decrypt(data, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  })
  return JSON.parse(CryptoJS.enc.Utf8.stringify(decrypted))
}

export {
  encrypt,
  decrypt,
}

在各自的request文件中，也就是请求拦截器中使用这个加密工具

import { encrypt } from '@/utils/cryptojs.js'

在你的请求拦截器中去应用这个函数，因为我们的约束中，只有几个接口是需要加解密的并不是所有接口都走加解密，所以区别针对接口进行加密操作
注：（此处拦截器略微有差别，加密操作通用，其余配置根据自身需要修改）

// request拦截器
service.interceptors.request.use(
  (config) => {
    // 设置通用请求头
    config.headers['Content-Type'] = 'application/json';

    // 根据token设置Authorization头
    // const { accessToken } = getUserInfo()
    if (getAccessToken()) {
      
      config.headers['Hc-Authorization'] = getAccessToken();
      
    }
    //加密请求  需要加密的接口路径
    const encryptedApis = [
      '/api/user/login',
      '/api/user/refresh-token',
      '/api/user/reset-pwd',
      '/api/user/register',
      '/api/auth/aws-s3/upload',  //文件上传
      '/api/auth/aws-s3/get/ps',  //文件预签名
    ];
    if (encryptedApis.includes(config.url)) {

      config.headers['Content-Type'] = 'text/plain;charset=UTF-8.';
      if (config.data) {
        config.data = encrypt(config.data);
      }
    }
    return config;
  }
);

到此处，便实现了加密操作了，因为项目中只需几个接口的加解密操作，所以我的解密都放在了业务组件当中去了，逻辑就是请求到了加密的数据res.data，就导入decrypt方法去包裹decrypt(res.data)进行解密，就能正常拿到解密后的数据了！

大功告成！！！！！