当前位置：首页 > article >正文

【CryptoJS库AES加密】

article 2025/2/28 15:57:18

当涉及到前端加密时，通常需要使用加密算法来保护用户的敏感信息。下面是一个使用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 = ''; // 清空输入框
    }
  }
};