【CryptoJS库AES加密】

当涉及到前端加密时,通常需要使用加密算法来保护用户的敏感信息。下面是一个使用Vue 2和Vue 3的前端加密方法的示例:

Vue 2版本的前端加密方法:

// 安装crypto-js库
// npm install crypto-js --save

// 导入CryptoJS模块
import CryptoJS from 'crypto-js';

// 加密方法
const encryptData = (data, key) => {
  const encryptedData = CryptoJS.AES.encrypt(data, key).toString();
  return encryptedData;
};

// 解密方法
const decryptData = (encryptedData, key) => {
  const decryptedData = CryptoJS.AES.decrypt(encryptedData, key).toString(CryptoJS.enc.Utf8);
  return decryptedData;
};

export { encryptData, decryptData };

然后在Vue组件中使用加密方法:

import { encryptData, decryptData } from './encryption';

export default {
  data() {
    return {
      inputData: '',
      encryptedData: '',
      decryptedData: ''
    };
  },
  methods: {
    encrypt() {
      this.encryptedData = encryptData(this.inputData, 'encryptionKey');
      this.inputData = ''; // 清空输入框
    },
    decrypt() {
      this.decryptedData = decryptData(this.encryptedData, 'encryptionKey');
      this.encryptedData = ''; // 清空输入框
    }
  }
};

Vue 3版本的前端加密方法:

// 安装crypto-js库
// npm install crypto-js --save

// 导入CryptoJS模块
import CryptoJS from 'crypto-js';

// 加密方法
const encryptData = (data, key) => {
  const encryptedData = CryptoJS.AES.encrypt(data, key).toString();
  return encryptedData;
};

// 解密方法
const decryptData = (encryptedData, key) => {
  const decryptedData = CryptoJS.AES.decrypt(encryptedData, key).toString(CryptoJS.enc.Utf8);
  return decryptedData;
};

export { encryptData, decryptData };

然后在Vue组件中使用加密方法:

import { encryptData, decryptData } from './encryption';

export default {
  data() {
    return {
      inputData: '',
      encryptedData: '',
      decryptedData: ''
    };
  },
  methods: {
    encrypt() {
      this.encryptedData = encryptData(this.inputData, 'encryptionKey');
      this.inputData = ''; // 清空输入框
    },
    decrypt() {
      this.decryptedData = decryptData(this.encryptedData, 'encryptionKey');
      this.encryptedData = ''; // 清空输入框
    }
  }
};

上述示例使用了CryptoJS库中的AES算法进行加密和解密操作。加密和解密方法都需要一个密钥参数,并将输入数据通过加密算法处理后返回结果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小百科

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值