vue前端请求传输加密

最新推荐文章于 2025-10-27 15:46:56 发布

原创最新推荐文章于 2025-10-27 15:46:56 发布 · 615 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

本文介绍了在Vue项目中如何实现前端请求数据的加密。首先，在utils文件夹下创建aesUtils.js，然后在axios的封装过程中集成加密逻辑，确保请求传输的安全性。

安装

npm install jsencrypt

npm install crypto-js

npm install lodash

在utils文件夹下新建aesUtils.js

import CryptoJS from 'crypto-js'
const aesUtils = {
  /**
   * @param {*需要加密的字符串 注：对象转化为json字符串再加密} word
   * @param {*aes加密需要的key值} keyStr
   */
  encrypt(word, keyStr) { // 加密
    var key = CryptoJS.enc.Utf8.parse(keyStr)
    var srcs = CryptoJS.enc.Utf8.parse(word)
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    }) // 加密模式为ECB，补码方式为PKCS5Padding（也就是PKCS7）
    return encrypted.toString()
  },

  decrypt(word, keyStr) { // 解密    
    var key = CryptoJS.enc.Utf8.parse(keyStr)
    var decrypt = CryptoJS.AES.decrypt(word, key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    })
    return CryptoJS.enc.Utf8.stringify(decrypt).toString()
  }
}
export default aesUtils

在封装的axios中

import JSEncrypt from "jsencrypt";
import aesUtils from '@/utils/aesUtils' //aes加密
import merge from 'lodash/merge'

// 获取rsaCode// 注册方法
function getRsaCode(str) {
  //引用 rsa 公钥
  let pubKey = `跟后端一致的公钥`;
  let encryptStr = new JSEncrypt();
  encryptStr.setPublicKey(pubKey); // 设置 加密公钥
  return encryptStr.encrypt(str.toString()); // 进行加密 并返回
}
//获取随机字符串
function getRandomStr(len = 32) {
  let $chars = "abcdefghijklmonpqrstuvwxyz0123456789";
  let maxPos = $chars.length;
  let pwd = "";
  for (let i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
}



	// 请求拦截器
    this.$request.interceptors.request.use(
      config => {
        config.withCredentials = false;
        /** 加密 start */
        let randomKey = getRandomStr(16);
        let key = getRsaCode(randomKey);
        const defaults = { t: new Date().getTime() }
        let upData = {
          d: aesUtils.encrypt(
            JSON.stringify(merge(config.params, defaults)),
            randomKey
          ),
          k: key
        };
        config.params = upData;
        /** 加密 end */
        // 还可以作其他处理
        
        return config;
      },
      error => {
        return Promise.reject(error);
      });