【CryptoJS库AES加密】

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

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

javascript 复制代码
// 安装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组件中使用加密方法:

javascript 复制代码
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版本的前端加密方法:

javascript 复制代码
// 安装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组件中使用加密方法:

javascript 复制代码
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算法进行加密和解密操作。加密和解密方法都需要一个密钥参数,并将输入数据通过加密算法处理后返回结果。

相关推荐
悠哉摸鱼大王2 小时前
前端获取设备视频流踩坑实录
前端·javascript
铅笔侠_小龙虾2 小时前
深入理解 Vue.js 原理
前端·javascript·vue.js
西西学代码2 小时前
Flutter---showCupertinoDialog
java·前端·flutter
你的眼睛會笑2 小时前
vue3 使用html2canvas实现网页截图并下载功能 以及问题处理
前端·javascript·vue.js
ZTLJQ3 小时前
植物大战僵尸HTML5游戏完整实现教程
前端·游戏·html5
无光末阳3 小时前
vue 环境下多个定时器的创建与暂停的统一封装
前端·vue.js
Hilaku3 小时前
技术Leader的“第一性原理”:我是如何做技术决策的?
前端·javascript·面试
liyf3 小时前
发布-订阅(Publish–Subscribe) vs 观察者模式(Observer Pattern)
前端
云中雾丽3 小时前
Flutter 里的 Riverpod 用法解析
前端