前端增加验签以及对AES加解密在项目中的使用

1、运行以下命令来安装crypto-js

npm install crypto-js

2、安装完成后在vue组件中使用crypto-js

使用的加验签方法是SHA256加密方式代码如下

import CryptoJS from 'crypto-js
import {Encrypt, Decrypt} from '../utils/AESencrypt'

function sendData (data) {
    data = JSON.stringify(data)
    data = CryptoJS.SHA256(data).toString()
    return data
}

// 在请求拦截器中配置body体代码到请求头中进行验签验证
axios.interceptors.request.use = instance.interceptors.request.use
instance.interceptors.request.use(config => {
    // 如果是流文件就不进行加密也不在请求头添加验签
    if (!isFileStream(config.data)) {
        // 验签方法调用
        let encry = sendData(config.data)
        // 请求头配置验签
        config.headers['ParamsKey'] = encry
        // 加密方法调用
        config.data = Encrypt(config.data)
    }
})

// 响应拦截器解密
instance.interceptors.response.use(response => {
    // 解密方法调用
    response.data = JSON.parse(Decrypt(response.data))
})

3、对请求入参加密与请求出参解密处理方法

ECB加密模式/PKCS5Padding填充模式

import CryptoJS from "crypto-js";

export function Encrypt (word) {
    // 加密
    encrypt(word, keyStr) {
        let key = 'dfserwererwr' // 密钥与后端匹配
        key = CryptoJS.enc.Utf8.parse(key)
        let srcs = JSON.stringify(word)
        srcs = CryptoJS.enc.Utf8.parse(srcs);
        let encrypted = CryptoJS.AES.encrypt(srcs, key, {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
        return CryptoJS.enc.Base64.stringify(encrypted.ciphertext) // 使用base64进行加密处理
    },

    // 解密
    export function Decrypt (word) {
        let key = 'dfserwererwr'
        key = CryptoJS.enc.Utf8.parse(key)
        
        let src = CryptoJS.enc.Base64.stringify(base64)
        let decrypted = CryptoJS.AES.decrypt(src, key, {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        })
        let decryptedStr = decrypted.toString(Crypto.enc.Utf8)
        return decryptedStr.toString()
    }
}

在使用过程中遇到的问题

项目中请求参数中包含一些流文件，对流文件进行加密处理后就导致后端接受不到流文件（流的线性读取特性决定了数据一旦被读取，就无法再次读取）为了解决这一问题在axios配置文件中对body体进行判断是否含有流进行判断，代码如下

function isFileStream (param) {
    return param instanceof File || param instanceof Blob || param instanceof ArrayBuffer
}