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

一、前言

注：前后端分离的开发方式，我们以接口为标准来进行推动，定义好接口，各自开发自己的功能，最后进行联调整合。无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式，就避免不了调用后端提供的接口来进行业务交互。网页或者app，只要抓下包就可以清楚的知道这个请求获取到的数据，这样的接口对爬虫工程师来说是一种福音，要抓你的数据简直轻而易举。
近期因为政府项目要求被要求项目所有的交互与响应都变为密文。如下图实现效果。
二、代码

• 安装crypto-js。

npm install crypto-js

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

• aes.js文件为AES加密解密方法，代码如下：

const CryptoJS = require('crypto-js'); //引用AES源码js
const key = CryptoJS.enc.Utf8.parse("xRH8EVswh6WdG5IC"); //设置十六位十六进制数作为密钥 加密
const iv = CryptoJS.enc.Utf8.parse('xRH8EVswh6WdG5IC'); //设置十六位十六进制数作为密钥偏移量 解密
const key1 = CryptoJS.enc.Utf8.parse("LAxl9zHb4kBvzEDa"); //设置十六位十六进制数作为密钥 加密
const iv1 = CryptoJS.enc.Utf8.parse('LAxl9zHb4kBvzEDa'); //设置十六位十六进制数作为密钥偏移量 解密

//为了确保更安全解密、加密各一个密钥
//加密方法
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();
  // 如果不需要解密.ciphertext.toString().toUpperCase();将这段代码删除
}
//解密方法
export function Decrypt(word) {
  // let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
  // let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  let decrypt = CryptoJS.AES.decrypt(word, key1, {
    iv: iv1,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  // console.log(decrypt.toString(CryptoJS.enc.Utf8))
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

• 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加密解密

// timeStamp=3423515
//时间戳
Date.prototype.Format = function (fmt) { // author: meizz
  var o = {
      "M+": this.getMonth() + 1, // 月份
      "d+": this.getDate(), // 日
      "h+": this.getHours(), // 小时
      "m+": this.getMinutes(), // 分
      "s+": this.getSeconds(), // 秒
      "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
      "S": this.getMilliseconds() // 毫秒
  };
  if (/(y+)/.test(fmt))
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
      if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
          return fmt;
}

// 添加请求拦截器
axios.interceptors.request.use(config => {
   // 在发送请求之前做某事，比如说 增加token
   //默认时间格式
  var time = new Date().Format("yyyy/MM/dd hh:mm:ss");
  var Data = new Date(time).getTime();
  var timeStamp = 'timeStamp='+Data;
  var token = Encrypt(timeStamp).toString();
  //增加请求头token与后端验证（可以不是用时间戳、自己与后端设置验证机制）
  config.headers.token = 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);
})