前端 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)
}
)