在 Vue 中使用 AES-CBC 实现前后端接口的加解密

本文旨在提供前端对称加密接口的解决方案

Step 1:安装工具crypto-js【这是咱们使用 aes 加密的核心加密库】

npm install crypto-js

Step 2:引用加密库

import  CryptoJS  from  'crypto-js' / var CryptoJS = require("crypto-js")

Step 3:自己写一个加解密的方法

utils.js

import  CryptoJS  from  'crypto-js'

export  default {
  encrypt (data, key) {
  // 加密方法
    data  =  CryptoJS.enc.Utf8.parse(data)
    key  =  CryptoJS.enc.Utf8.parse(key)
    const iv = **************** // 随机生成16位字符
    var  encrypted  =  CryptoJS.AES.encrypt(data, key, {
      mode:  CryptoJS.mode.CBC,
      padding:  CryptoJS.pad.Pkcs7,
      iv
    })
    return  iv.concat(encrypted.ciphertext).toString(CryptoJS.enc.Base64)
  }
  decrypt (data, key) {
  // 解密方法
    data  =  CryptoJS.enc.Base64.parse(data)
    key  =  CryptoJS.enc.Utf8.parse(key)
    const  iv  =  CryptoJS.lib.WordArray.create(data.words, 16)

    const decData = CryptoJS.lib.WordArray.create(data.words.slice(4))
    .toString(CryptoJS.enc.Base64)
    var  decrypted  =  CryptoJS.AES.decrypt(decData, key, {
      mode:  CryptoJS.mode.CBC,
      padding:  CryptoJS.pad.Pkcs7,
      iv:  iv
    })
    return  decrypted.toString(CryptoJS.enc.Utf8)
  }
}

Step 4: 在请求接口时使用加解密方法【这里最好写个中间件对你的所有接口封装一下,这样只需处理一处,减少冗余代码,便于修改】

import  Utils  from  './utils'

const  ajax  =  function (url, params) {
  // 16位字符
  const  key  =  '****************' 
  // 加密请求参数
  const  payload  =  Utils.encrypt(JSON.stringify(params), key)
  // 重新定义请求头
  xhr.setRequestHeader('Content-Type', '类型是后端给的新的定义')
  // 解密返回数据
  const  res  =  JSON.parse(Utils.decrypt(xhr.responseText, key)) 
}

以上,即为前端处理接口的加解密方法。
可能不适用所有开发实例,具体实现参考crypto-js 库等。

-------------------------------------------Over-------------------------------------------