Vue3.x 前后端通信进行对所有请求和响应都进行AES加密（密文形式）附SHA1加密

无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式，就避免不了调用后端提供的接口来进行业务交互。网页或者app，只要抓下包就可以清楚的知道这个请求获取到的数据，这样的接口很容易造成数据泄露，爬虫工程师要抓你的数据简直轻而易举。
因为之前公司的接口没有进行加密处理，导致数据泄露，现被要求项目所有的交互与响应都变为密文。如下图实现效果。

代码

• 安装crypto-js

npm install crypto-js

• 在根目录下的src创建util文件夹、文件夹下aes.js与request.js 。在main.js里面配置引入request.js。

// aes.js文件为AES加密解密方法，代码如下
const CryptoJS = require('crypto-js') // 引用AES源码js
const Qs = require('qs')
const key = CryptoJS.enc.Utf8.parse('xxxxxxxxxxxxxxxx') // 十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('xxxxxxxxxxxxxxxx') // 十六位十六进制数作为密钥偏移量

// 解密方法 word 需要被加密的字符串
export function Decrypt(word) {
  let encryptedHexStr = CryptoJS.enc.Hex.parse(word)
  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
  let decrypt = CryptoJS.AES.decrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
  return decryptedStr.toString()
}

// 加密方法 word 需要被加密的字符串
export function Encrypt(word) {
  let srcs = CryptoJS.enc.Utf8.parse(word)
  let encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypted.ciphertext.toString().toUpperCase()
}
// 解密url
export function DecryptQuery() {
  const [url, str] = window.location.href.split('?')
  if (!str) return { url }
  const { secret } = Qs.parse(str)
  if (!secret) return { url }
  let encryptedHexStr = CryptoJS.enc.Hex.parse(secret)
  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
  let decrypt = CryptoJS.AES.decrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
  return { url, secret: Qs.parse(decryptedStr.toString()) }
}
// SHA1 加密
export function signSha1(params){
  let init =  {
    "timestamp": new Date().getTime(),
    "signType": "SHA1"
  }
  let newParams = Object.assign({},init, params);   // init 函数内部的对象  obj  外部传进来的对象  得到一个新的对象
  let pro = [];  //声明一个空数组
  let i = 0;
  for (let key in newParams) {  //取出对象里面的键  添加到数组中
    pro[i] = key;
    i++;
  }
  pro.sort();   //把数组里面进行排序
  let string  = ''
  let j = 0
  for (let tmp in newParams) {   // 根据排序好的进行重新赋值
    if(pro[j] =='params'){
      newParams[pro[j]] = JSON.stringify(newParams[pro[j]])
    }
    string+= `${pro[j]}=${newParams[pro[j]]}${j<pro.length -1?'|':''}`;
    j++;
  }
  var wordArray = CryptoJS.HmacSHA1(string, key);
  var str = wordArray.toString(CryptoJS.enc.Hex);
  return str.toUpperCase()
}

• request.js为封装的请求、时间戳、增加token（token就是时间戳与后端验证有效无效、后端设置有效期）

import axios from 'axios';//引入axios
import { MessageBox, Message } from 'element-ui';//看自己需求是否引入
import qs from 'qs';
import { Encrypt, Decrypt } from '../util/aes.js';//引入刚才封装的aes加密解密

// 添加请求拦截器
axios.interceptors.request.use(config => {
   // 在发送请求之前做某事，比如说 增加token
  var token = Encrypt(config.data).toString();
  //增加请求头token与后端验证（可以不是用时间戳、自己与后端设置验证机制）
  config.headers.token = token;
  // config.data = token 
  return config;
}, error => {
  return Promise.reject(error);
})

// 添加响应拦截器
axios.interceptors.response.use(config => {
	//console.log(config)config是响应所有的请求
    // 判断状态是否是200
  if (config.status === 200) {
 	//如果是200的话、解密数据
    var data = Decrypt(config.data)
    //data是后端返回的数据
    //因为本项目自己用的是response为返回的数据所以坐下处理，如果不需要可以注掉
    var response = {
      data:JSON.parse(data)
    }
     return response;
  } else {
    Promise.reject();
  }
}, error => {
  return Promise.reject(error);
})