目的

确保前后端传输数据的安全性，避免明文显示，避免数据被篡改

方案一：

aes、rsa配合加密方案：

  1. 对称加密生成密钥A（aes key）
  2. 用密钥A对数据进行对称加密，生成数据的密文a
  3. 使用服务器下发的非对称加密的公钥，对对称加密密钥A进行加密，生成密钥的密文b
  4. 和数据的密文a、生成密钥的密文b传递给服务端

aes对称加密，利用其加解密速度快的特点，对报文整体参数进行加解密；然后利用rsa的加密难破解的特点，对aes key进行加解密

方案二：

相对比较更安全的方案
公钥加密、私钥解密、私钥签名、公钥验签。

相关链接: https://www.cnblogs.com/pcheng/p/9629621.html

方案一具体实现

前端

1、aes加密采用Crypto.js插件

封装crypro.js

  1. import { aesKey, aesIV } from './config'
  2. const CryptoJS = require('crypto-js');  //引用AES源码js
  4. // AES/CBC/PKCS7Padding 算法/模式/补码方式
  5. // 字符集 utf-8
  6. // mode 支持 CBC CFB CTR ECB OFB 默认CBC
  7. // padding 支持 Pkcs7 ZeroPadding NoPadding ... 默认 Pkcs7 即 Pkcs5
  9. // 前端 AES/CBC/Pkcs7 + iv
  10. // 后端 AES/CBC/Pkcs5 + iv
  12. const key = CryptoJS.enc.Utf8.parse(aesKey);  //十六位十六进制数作为密钥
  13. const iv = CryptoJS.enc.Utf8.parse(aesIV);   //十六位十六进制数作为密钥偏移量
  15. //加密方法
  16. export const aesEncrypt = (data, k) => {
  17.   const key = CryptoJS.enc.Utf8.parse(k || aesKey)
  18.   let encrypted = CryptoJS.AES.encrypt(data, key, {
  19.     iv: iv,
  20.     mode: CryptoJS.mode.CBC,
  21.     padding: CryptoJS.pad.Pkcs7,
  22.   })
  23.   // 转换为字符串
  24.   return encrypted.toString()
  25. }
  27. //解密方法
  28. export const aesDecrypt = (data, k) => {
  29.   const key = CryptoJS.enc.Utf8.parse(k || aesKey)
  30.   let decrypted = CryptoJS.AES.decrypt(data, key, {
  31.     iv: iv,
  32.     mode: CryptoJS.mode.CBC,
  33.     padding: CryptoJS.pad.Pkcs7,
  34.   })
  35.   // 转换为 utf8 字符串
  36.   let decryptedStr = decrypted.toString(CryptoJS.enc.Utf8)
  37.   return decryptedStr
  38. }

2、rsa采用jsencrypt.js插件

封装 jsencrypt.js

  1. // 非对称加密 RSA
  2. import JSEncrypt from "jsencrypt";
  3. import { rsaPubKey, rsaPriKey } from "./config";
  5. // 公钥加密
  6. export const rsaEncrypt = (data, key) => {
  7.   const encryptor = new JSEncrypt() // 创建加密对象实例
  8.   // 设置公钥
  9.   encryptor.setPublicKey(key || rsaPubKey)
  10.   // 加密
  11.   const rsaCipher = encryptor.encrypt(data)
  12.   return rsaCipher
  13. }
  15. // 私钥解密
  16. export const rsaDecrypt = (ciphertext, key) => {
  17.   const decrypt = new JSEncrypt() // 创建解密对象实例
  18.   // 设置私钥
  19.   decrypt.setPrivateKey(key || rsaPriKey)
  20.   const oriData = decrypt.decrypt(ciphertext)
  21.   return oriData
  22. }

3、请求加解密封装，以及重发逻辑处理

  1. /**
  2.  * 封装axios
  3.  * aes + rsa
  4.  * 1、请求前body参数加密(不针对query参数)
  5.  * VUE_APP_ENCRY '1'-加密 '0'-明文传输，便于查看参数
  6.  * 2、获取响应数据，解密处理，判断 res.headers.keycipher 是否需要解密
  7.  * 密文： 前端获取一律需要解密转 json
  8.   */
  9. import { Message } from 'element-ui';
  10. import axios from 'axios'
  11. import moment from "moment";
  12. import { isObject, isString, getItem } from './utils';
  13. import { aesKey, inUseMockdata } from "./config";
  14. import { aesEncrypt, aesDecrypt } from './crypto';
  15. import { rsaEncrypt, rsaDecrypt } from './jsencrypt';
  17. axios.defaults.headers.post["Content-Type"] = "application/json; charset=UTF-8"
  19. // 1. 创建新的axios实例，
  20. const instance = axios.create({
  21.   baseURL: !inUseMockdata ? process.env.VUE_APP_BASEURL + process.env.VUE_APP_PREURL : '',
  22.   // `withCredentials`指示是否跨站点访问控制请求
  23.   withCredentials: true,
  25.   // "responseType"表示服务器将响应的数据类型
  26.   // 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  27.   responseType: 'json',
  29.   // headers`是要发送的自定义 headers
  30.   headers: {
  31.     // 'X-Requested-With': 'XMLHttpRequest',
  32.     'Cache-Control': 'no-store' // IE 禁用缓存 // 'no-cache'
  33.   },
  34.   // 超时时间 单位是ms，这里设置了10s的超时时间
  35.   timeout: 10 * 1000,
  36.   transformRequest: [
  37.     function (data, headers) {
  38.       // 这里没有对 Form-Data 格式的报文处理
  39.       if (isObject(data)) {
  40.         // 一、请求参数加密
  41.         if (process.env.VUE_APP_RUNTIME === 'prod') {
  42.           data = JSON.stringify(data)
  43.           headers["keyCipher"] = rsaEncrypt(aesKey) // 传输 aes key 密文
  44.           data = aesEncrypt(data) // 加密请求参数
  45.         }
  46.         return data
  47.       }
  48.       return data
  49.     }
  50.   ],
  51.   transformResponse: [
  52.     function (data, headers) {
  53.       if (isString(data)) {
  54.         try {
  55.           // 先对 axios 返回的源数据处理
  56.           data = JSON.parse(data)
  57.           /**
  58.            * 二、获取响应数据之后解密
  59.            * 判断 headers.keycipher 是否需要解密 (后端在接口报错的情况下，直接返回的是明文，不对错误信息加密)
  60.            * 1、rsa 解密后端生成的 aes key
  61.            * 2、aes 解密返参密文
  62.            */
  63.           const { keycipher = '' } = headers || {}
  64.           if (keycipher) {
  65.             // 解密
  66.             const resAesKey = rsaDecrypt(keycipher)
  67.             const dataStr = aesDecrypt(data, resAesKey) || '{}'
  68.             data = JSON.parse(dataStr)
  69.           }
  70.           console.log("res data ====", data);
  71.         } catch (err) {
  72.           console.log("transformResponse-err", err);
  73.         }
  74.       return data
  75.       }
  76.     }
  77.   ]
  78. })
  80. const codeMessage = {
  81.   200: '服务器成功返回请求的数据。',
  82.   201: '新建或修改数据成功。',
  83.   202: '一个请求已经进入后台排队（异步任务）。',
  84.   204: '删除数据成功。',
  85.   400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  86.   401: '用户没有权限（令牌、用户名、密码错误）。',
  87.   403: '用户得到授权，但是访问是被禁止的。',
  88.   404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  89.   405: '请求方法未允许',
  90.   406: '请求的格式不可得。',
  91.   408: '请求超时',
  92.   410: '请求的资源被永久删除，且不会再得到的。',
  93.   413: '上传文件过大',
  94.   422: '当创建一个对象时，发生一个验证错误。',
  95.   500: '服务器发生错误，请检查服务器。',
  96.   501: '网络未实现',
  97.   502: '网关错误。',
  98.   503: '服务不可用，服务器暂时过载或维护。',
  99.   504: '网关超时。',
  100.   505: 'http版本不支持该请求'
  101. };
  103. // 2. 添加请求拦截器
  104. instance.interceptors.request.use(config => {
  105.   if (config.url) {
  106.     config.headers = {
  107.       ...config.headers,
  108.       timeStamp: new Date().getTime(), // 毫秒数
  109.       token: getItem("authToken") || ""
  110.     }
  111.     // 必须为开发环境，api内的mock开关开启才生效
  112.     if (process.env.NODE_ENV === "development" && inUseMockdata && config.mock && config.mockUrl) {
  113.       // mock 生效路径
  114.       config.url = config.mockUrl
  115.     }
  116.     // 请求路径增加时间戳，防止命中缓存
  117.     config.url += `?timeStamp=${config.headers.timeStamp}`
  118.     return config;
  119.   } else {
  120.     return Promise.reject('接口不合法');
  121.   }
  122. }, error => {
  123.   // 对请求错误做些什么
  124.   console.log('request-err', error);
  125.   Message.error(error);
  126.   return Promise.reject(error);
  127. });
  129. let retry = 2 // 重发次数
  130. let retryDelay = 200 // 重发时延
  132. // 3. 添加响应拦截器
  133. instance.interceptors.response.use(response => {
  134.   // 对响应数据做点什么
  135.   return response.data;
  136. }, error => {
  137.   // 对响应错误做点什么
  138.   console.log('response-err', error);
  139.   /*****
  140.    * 接收到异常响应的处理开始
  141.    * 跨域存在获取不到状态码的情况
  142.    *  *****/
  143.   if (error && error.response) {
  144.     // 1.公共错误处理
  145.     // 2.根据响应码具体处理
  146.     const { status, config, statusText } = error.response;
  147.     if (status) {
  148.       const errorText = codeMessage[status] || statusText || '出错了';
  149.       Message.error(`请求错误 ${status}: ${config.url}\n${errorText}`);
  150.     } else {
  151.       Message.error('您的网络发生异常，无法连接服务器');
  152.     }
  153.   } else {
  154.     // 其它异常处理
  155.     console.log("error!: " + JSON.stringify(error));
  157.     // 重发逻辑
  158.     let { config = {} } = error || {}
  159.     // 记录单个api的请求次数
  160.     config.requestCount = config.requestCount || 1
  161.     if (config.requestCount < retry) {
  162.       config.requestCount++ // 重发次数累加
  163.       let backoff = new Promise((resolve) => {
  164.         setTimeout(() => {
  165.           resolve()
  166.         }, retryDelay || 100);
  167.       })
  168.       // 重发 更新时间戳
  169.       const retryUrl = config.url.split("?")[0] + `?timeStamp=${new Date().getTime()}`
  170.       config.url = retryUrl
  171.       console.log("retry config ===", config);
  172.       return backoff.then(() => {
  173.         return axios.request(config)
  174.       })
  175.     } else {
  176.       Message({
  177.         message: "连接服务器失败，请稍后再试",
  178.         type: "error"
  179.       })
  180.     }
  182.     /* 超时处理
  183.     无法通过判断是否存在 timeout 字符，来确定服务是否连接超时
  184.     因为 error 信息里包含请求的 config 信息，里面配置的 timeout 字段 */
  185.     if (JSON.stringify(error).toLocaleLowerCase().includes('timeout')) {
  186.       Message.error('服务器响应超时，请刷新当前页');
  187.     } else {
  188.       Message({
  189.         message: '连接服务器失败',
  190.         type: "error"
  191.       })
  192.     }
  193.   }
  195.   /***** 处理结束 *****/
  196.   return Promise.reject(error);
  198. });
  200. //4.导出文件
  201. export default instance

后端