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

相关推荐
jojo是只猫15 分钟前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78912 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序