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

相关推荐
Mintopia12 分钟前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.16 分钟前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia26 分钟前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
charlie11451419133 分钟前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头34 分钟前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
yenggd34 分钟前
3种XSS攻击简单案例
前端·xss
盖头盖35 分钟前
【xss基本介绍】
前端·xss
一枚前端小能手43 分钟前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖43 分钟前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
柯南二号1 小时前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js