vue---加密和解密

为保证数据的安全性，在做数据传输和渲染的时候，需要对数据字符串加密和解密：

一、安装 CryptoJS 库

npm install crypto-js

二、AES 加密解密函数

import CryptoJS from 'crypto-js';

// AES加密（ECB模式 + Pkcs7填充）
export const aesEncrypt = (str, key) => {
  const utf8Key = CryptoJS.enc.Utf8.parse(key);  // 密钥格式化‌:ml-citation{ref="3,5" data="citationList"}
  const encrypted = CryptoJS.AES.encrypt(str, utf8Key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.toString();  // 返回Base64格式密文‌:ml-citation{ref="3,4" data="citationList"}
};

解密函数

// AES解密
export const aesDecrypt = (ciphertext, key) => {
  const utf8Key = CryptoJS.enc.Utf8.parse(key);
  const decrypted = CryptoJS.AES.decrypt(ciphertext, utf8Key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return decrypted.toString(CryptoJS.enc.Utf8);  // 转为UTF-8明文‌:ml-citation{ref="3,6" data="citationList"}
};

三、DES 加密/解密

// DES加密（ECB模式 + Pkcs7填充）
export const desEncrypt = (str, key = 'Xy20221020') => {
  const utf8Key = CryptoJS.enc.Utf8.parse(key);
  const encrypted = CryptoJS.DES.encrypt(str, utf8Key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.toString();  // 返回Base64密文‌:ml-citation{ref="5" data="citationList"}
};

解密：

// DES解密
export const desDecrypt = (ciphertext, key = 'Xy20221020') => {
  const utf8Key = CryptoJS.enc.Utf8.parse(key);
  const decrypted = CryptoJS.DES.decrypt(ciphertext, utf8Key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return decrypted.toString(CryptoJS.enc.Utf8);  // 转为明文‌:ml-citation{ref="5" data="citationList"}
};

在VUE里面的使用：

<template>
  <div>
    <input v-model="plainText" placeholder="输入明文" />
    <button @click="handleEncrypt">加密</button>
    <button @click="handleDecrypt">解密</button>
    <p>加密结果: {{ encryptedText }}</p>
    <p>解密结果: {{ decryptedText }}</p>
  </div>
</template>

<script>
import { aesEncrypt, aesDecrypt } from '@/utils/crypto';

export default {
  data() {
    return {
      plainText: 'Hello World',
      encryptedText: '',
      decryptedText: '',
      secretKey: 'mySecretKey123456'  // 需与后端协商一致‌:ml-citation{ref="1,4" data="citationList"}
    };
  },
  methods: {
    handleEncrypt() {
      this.encryptedText = aesEncrypt(this.plainText, this.secretKey);
    },
    handleDecrypt() {
      this.decryptedText = aesDecrypt(this.encryptedText, this.secretKey);
    }
  }
};
</script>

四、全局使用

1、创建工具模块 src/utils/crypto.js

import CryptoJS from 'crypto-js'

const AES = {
  encrypt(str, key) {
    const utf8Key = CryptoJS.enc.Utf8.parse(key)
    return CryptoJS.AES.encrypt(str, utf8Key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    }).toString()
  },
  decrypt(ciphertext, key) {
    const utf8Key = CryptoJS.enc.Utf8.parse(key)
    return CryptoJS.AES.decrypt(ciphertext, utf8Key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    }).toString(CryptoJS.enc.Utf8)
  }
}

export default AES

2、main.js 里面注册VUE原型

import crypto from '@/utils/crypto'
Vue.prototype.$crypto = crypto  // 组件内通过 this.$crypto 调用‌:ml-citation{ref="1,3" data="citationList"}

3、生成随机字符串

randomstr(length){
      const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for (let i = 0; i < length; i++) {
      const randomIndex = Math.floor(Math.random() * charset.length);
      result += charset[randomIndex];
    }
    return result;
  }

打完收工！