vue中使用AES的CBC模式进行加解密

1、首先需要下载依赖  

npm install crypto-js --save

2、按需引入后直接使用

<script setup>
import CryptoJS from 'crypto-js'



 const add = ()=>{
   //message 为需要输入的加密串
   //key 为前后端保持统一 一般长度为16个字符
   //iv 为前后端保持统一 一般长度为16个字符
  const message = '1234asdasd';
const key = CryptoJS.enc.Utf8.parse('1234560000000000');
const iv = CryptoJS.enc.Utf8.parse('0000000000000000');

const encrypted = CryptoJS.AES.encrypt(message, key, {
  iv: iv,
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7
}).toString();

console.log(encrypted);
// 解密
const decrypted = CryptoJS.AES.decrypt(encrypted, key, {
  iv: iv,
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7
}).toString(CryptoJS.enc.Utf8);
console.log(decrypted);
}








<script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
VUE3 项目使用 AES CBC 模式进行 post 请求,可以按照以下步骤进行: 1. 安装 axios 和 crypto-js: ```bash npm install axios crypto-js ``` 2. 在需要使用 axios 的组件或页面引入 axios 和 crypto-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,加密密钥和解密密钥必须相同,否则无法正确解密数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值