vue+axios使用crypto-js对参数加密

40 篇文章 1 订阅
32 篇文章 1 订阅

在前后端分离的项目中有的需要提高安全性,会要求对请求参数进行加密。
目前已使用的是对称加密,非对称加密需要网上找非对称加密方式把对称加密的修改应该就差不多。
实现思路:在项目中安装引入crypto-js 依赖,然后写个加密方法,如果有区分getpost两种请求方式那就写两个加密方法。最后在axios请求拦截方法中调用即可。

1.安装引入crypto-js。 npm install crypto-js -D
2.在项目中新建一个加密文件,比如:cryptoFun.js
3,在文件中引入加密插件

import CryptoJS from 'crypto-js';
import md5 from 'blueimp-md5';
import auth from './index'

我这边还有多引入一个md5加密。
4.写加密方法并export

export default {
  cryptoFunPost(param, keys) {
  //引入认证信息,看自己是否需要,不需要的话,只要一个get的应该就可以了。
    var authorization = auth.auths.authorization;
    if (authorization != null && authorization != '' && authorization.length == 36) {
      keys = keys + '[' + authorization + ']';
      keys = md5(keys).toString().substring(0, 16);
    }
    var srcs = CryptoJS.enc.Utf8.parse(JSON.stringify(param));
    var key = CryptoJS.enc.Utf8.parse(keys);
    var datas = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7});
    return datas.toString();
  },
  cryptoFunGet(param, keys) {
    var srcs = CryptoJS.enc.Utf8.parse(param);
    var key = CryptoJS.enc.Utf8.parse(keys);
    var datas = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7});
    return datas.toString();
  }
};

5.在axios拦截方法中调用这加密方法即可

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  //-------------加密---------------
  if (config.method == 'post') {
  //post请求不带参数与文件上传操作不加密,这个看需求进行调整
  if (config.data != undefined && config.data.constructor.name != 'FormData') {
  	cryptoFunPost(config.data,xxxxxxx)
  	}
  }else if(config.method == 'get'){
  	cryptoFunGet(config.data,xxxxxxx)
  }
  return config
  }, function (error) {
  return Promise.reject(error);
})
VUE3 项目中使用 AES CBC 模式进行 post 请求,可以按照以下步骤进行: 1. 安装 axioscrypto-js: ```bash npm install axios crypto-js ``` 2. 在需要使用 axios 的组件或页面中引入 axioscrypto-js: ```javascript import axios from 'axios'; import CryptoJS from 'crypto-js'; ``` 3. 定义一个加密函数,用来对请求数据进行加密: ```javascript function encryptData(data, key, iv) { const encrypted = CryptoJS.AES.encrypt(data, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return encrypted.toString(); } ``` 其中,`data` 是需要加密的数据,`key` 是加密密钥,`iv` 是初始化向量,`mode` 和 `padding` 是 AES 加密算法的模式和填充方式。 4. 在发送请求前,对请求数据进行加密: ```javascript const key = '1234567890123456'; // 加密密钥 const iv = CryptoJS.enc.Utf8.parse('1234567890123456'); // 初始化向量 const requestData = { name: 'John', age: 30 }; // 需要加密的数据 const encryptedData = encryptData(JSON.stringify(requestData), key, iv); // 对数据进行加密 axios.post('/api/data', { data: encryptedData }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 其中,`JSON.stringify(requestData)` 将请求数据转换成字符串,然后使用 `encryptData` 函数对其进行加密。 5. 定义一个解密函数,用来对响应数据进行解密: ```javascript function decryptData(data, key, iv) { const decrypted = CryptoJS.AES.decrypt(data, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return decrypted.toString(CryptoJS.enc.Utf8); } ``` 其中,`data` 是需要解密的数据,`key` 是解密密钥,`iv` 是初始化向量,`mode` 和 `padding` 是 AES 解密算法的模式和填充方式。 6. 在接收响应后,对响应数据进行解密: ```javascript const key = '1234567890123456'; // 解密密钥 const iv = CryptoJS.enc.Utf8.parse('1234567890123456'); // 初始化向量 axios.get('/api/data') .then(response => { const decryptedData = decryptData(response.data, key, iv); // 对响应数据进行解密 console.log(JSON.parse(decryptedData)); }) .catch(error => { console.error(error); }); ``` 其中,`response.data` 是响应数据,使用 `decryptData` 函数对其进行解密,然后使用 `JSON.parse` 将解密后的字符串转换成对象。 注意:在使用 AES CBC 模式进行加密时,需要指定初始化向量 iv,加密密钥和解密密钥必须相同,否则无法正确解密数据。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值