前端VUE 项目中 AES 加密

参考文章

前端 VUE项目 AES加密

1. 明确 加密规则

 加密方式方法：js-sha256， md5, crypto-js

下载依赖

npm  install crypto-js
npm  install blueimp-md5
npm  install js-sha256

引入依赖

import md5 from 'blueimp-md5'
import CryptoJS from 'crypto-js'
import { sha256 } from 'js-sha256'

2. 封装 加密方法

参数：
word: 必须是字符串
密钥：字符串，后端人员提供

function encrypt(word, keyStr) {
  word = JSON.stringify(word)
  keyStr = keyStr ? keyStr : ‘ 密钥’
  let keyS = md5(sha256(keyStr))
  let key = keyS.substring(0, 1)   //16
  let iv = keyS.substring(1)
  key = CryptoJS.enc.Utf8.parse(key)  
  iv = CryptoJS.enc.Utf8.parse(iv)
  let encrypted = CryptoJS.AES.encrypt(word, key, {
    iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypted.toString()
}

3. 使用加密后的方法

基于以下需求，我们需要在请求拦截器对参数进行加密

1.加密的原参数要验证签名，加密后的参数encrptBody不参与签名
2 加密的参数对象body加密成：
{
encrptBody: 加密后的body字符串
}
// 添加请求拦截器

注意： 请求拦截器需要放在封装的请求方法的外面， 不然会造成多个拦截器队列

axios.interceptors.request.use(
  function(config) {
    if (config.headers['Content-Type'] == 'multipart/form-data') {
    } else if (config.data) {
      config.data = { encryptBody: encrypt(config.data) }
    }
    return config
  },
  function(error) {
    return Promise.reject(error)
  }
)