vue 封装 axios 并使用 aes 对请求响应数据加解密

// 前端通过AES进行加解密（CBC模式）

npm install crypto-js --save-dev

1、新建文件 AESED.js

import CryptoJS from "crypto-js";

let key = CryptoJS.enc.Utf8.parse('P@S5W0rDK3yBACHU'); // 密钥：一个常量，前后端协定后一个字符串即可

let iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412'); // 偏移量：一个常量，前后端协定后一个字符串，前后端一致即可

//解密方法

function Decrypt(word) {

    // 删除字符串中的空格

    let strs = word.replace(/\ +/g, "");

    // 删除字符串中的换行符

    let words = strs.replace(/[\r\n]/g, "")

    var encryptedHexStr = CryptoJS.enc.Base64.parse(words);

    var srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);

    var decrypt = CryptoJS.AES.decrypt(srcs, key, {

        iv: iv,

        mode: CryptoJS.mode.CBC,

        padding: CryptoJS.pad.Pkcs7

    });

   

    var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);

    return decryptedStr.toString();

}

//加密方法

function Encrypt(word) {

    var srcs = CryptoJS.enc.Utf8.parse(word);

    var encrypted = CryptoJS.AES.encrypt(srcs, key, {

        iv: iv,

        mode: CryptoJS.mode.CBC,

        padding: CryptoJS.pad.Pkcs7

    });

    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);

}

//暴露接口

export default {

    Decrypt,

    Encrypt

}

2、新建request.js

import axios from 'axios';

// 引入 AESED.js

import Aes from "@/utils/AESED"

const baseAesFlag = false //是否开启aes加密

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';

// 创建axios实例

const service = axios.create({

    // axios中请求配置有baseURL选项，表示请求URL公共部分

    baseURL: process.env.VUE_APP_BASE_API,

    // 超时

    timeout: 10000

})

// 请求拦截器

service.interceptors.request.use(function(config) {

    // 在发送请求之前做些什么

   if (baseAesFlag) {

            // 请求参数加密

              config.data = Aes.Encrypt(JSON.stringify(config.data))

    }

    return config;

}, function(error) {

    // 对请求错误做些什么

    return Promise.reject(error);

});

// 响应拦截器

service.interceptors.response.use(function(response) {

    // 2xx 范围内的状态码都会触发该函数。

    // 对响应数据做点什么

       let data = response.data

       if (baseAesFlag) {

              // 对响应数据解密

              data = JSON.parse(Aes.Decrypt(data))

       }

    return data;

}, function(error) {

    // 超出 2xx 范围的状态码都会触发该函数。

    // 对响应错误做点什么

    if(error && error.response) {

        const status = error.response.status

        switch(status) {

            case 400:

                break;

            case 401:

                break;

            case 403:

                break;

            case 404:

                break;

            case 408:

                break;

            case 500:

                break;

            case 501:

                break;

            case 502:

                break;

            case 503:

                break;

            case 504:

                break;

            default:

                console.log('服务器端出错！');

        }

    }else {

       

    }

    return Promise.reject(error);

});

export default service;