Vue 中轻松运用 crypto-js 进行加密解密，筑起安全堡垒

2023-12-03 12:55:59

前言

在构建 Vue 应用时，数据安全是至关重要的。为了保护敏感数据免受未经授权的访问和使用，可以使用加密技术。加密将数据转换为一种不可读的格式，只有拥有密钥的人才能解密。本文将介绍如何在 Vue 中使用 crypto-js 库来实现加密和解密。

一、安装和引入 crypto-js

首先，需要在项目中安装 crypto-js。可以通过以下命令进行安装：

npm install crypto-js

安装完成后，可以在 Vue 组件中引入 crypto-js。在 script 标签中添加以下代码：

import CryptoJS from 'crypto-js';

二、实现加密方法

接下来，可以实现加密方法。加密方法接受两个参数：要加密的数据和加密密钥。加密密钥是一个字符串，用于对数据进行加密。加密方法返回加密后的数据，也是一个字符串。

export function encrypt(data, key) {
  const ciphertext = CryptoJS.AES.encrypt(data, key);
  return ciphertext.toString();
}

三、实现解密方法

接下来，可以实现解密方法。解密方法接受两个参数：要解密的数据和解密密钥。解密密钥与加密密钥必须相同。解密方法返回解密后的数据，也是一个字符串。

export function decrypt(ciphertext, key) {
  const bytes = CryptoJS.AES.decrypt(ciphertext, key);
  const plaintext = bytes.toString(CryptoJS.enc.Utf8);
  return plaintext;
}

四、生成随机字符串

在使用加密和解密时，通常需要生成一个随机字符串作为加密密钥。可以使用 crypto-js 库的 Random 类来生成随机字符串。

export function generateRandomString(length) {
  const randomString = CryptoJS.lib.WordArray.random(length / 2).toString();
  return randomString;
}

五、实例代码

以下是一个示例，演示如何在 Vue 组件中使用 crypto-js 库来加密和解密数据：

<template>
  <div>
    <input type="text" v-model="data" />
    <button @click="encryptData">加密</button>
    <button @click="decryptData">解密</button>
    <p>{{ encryptedData }}</p>
    <p>{{ decryptedData }}</p>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js';

export default {
  data() {
    return {
      data: '',
      encryptedData: '',
      decryptedData: '',
    };
  },
  methods: {
    encryptData() {
      const key = 'my secret key';
      this.encryptedData = encrypt(this.data, key);
    },
    decryptData() {
      const key = 'my secret key';
      this.decryptedData = decrypt(this.encryptedData, key);
    },
  },
};
</script>