Vue路由的query传参加密之AES对称加密

在Vue项目中，我们经常需要通过路由的query参数进行数据传递。例如，从一个页面跳转到另一个页面时，我们可能会传递一些参数以保持状态或传递数据。但是，有些敏感数据需要加密以保证安全性。这时，我们可以使用AES对称加密对路由的query参数进行加密和解密。

首先，我们需要安装一个用于AES加密的库。在Vue项目中，我们可以使用crypto-js库来实现这一需求。通过npm安装这个库：

npm install crypto-js

安装完成后，我们可以在需要加密和解密的组件中引入这个库。

import CryptoJS from 'crypto-js';

接下来，我们创建一个用于加密和解密的函数。在这个函数中，我们将使用AES算法和CBC模式对数据进行加密和解密。

function encryptDecrypt(method, key, data, iv) {
  const ciphertext = CryptoJS[method](data, key, { iv: iv });
  return ciphertext.toString();
}
// 加密函数
function encrypt(key, data) {
  const iv = CryptoJS.lib.WordArray.random(128/8);
  const encryptedData = encryptDecrypt('AES-CBC', key, data, iv); // 使用AES-CBC算法和CBC模式加密数据
  return { iv: iv.toString(), encryptedData }; // 将初始化向量和加密后的数据一起返回
}
// 解密函数
function decrypt(key, encryptedData) {
  const iv = CryptoJS.enc.Utf8.parse(encryptedData.iv);
  const decryptedData = encryptDecrypt('AES-CBC', key, encryptedData.encryptedData, iv); // 使用相同的初始化向量和密钥解密数据
  return decryptedData.toString(CryptoJS.enc.Utf8); // 将解密后的数据转换为字符串格式
}

现在，我们可以使用这些函数对Vue路由的query参数进行加密和解密了。在跳转之前，我们将需要加密的数据传递给encrypt函数，并将返回的对象作为query参数传递给路由。在目标组件中，我们从query参数中获取加密后的数据，并使用decrypt函数进行解密。

下面是一个示例：

// 跳转前的组件
this.$router.push({ path: 'target-component', query: { data: encrypt('aes-key', '需要加密的数据') }});
// 目标组件
mounted() {
  const encryptedData = this.$route.query.data;
  const decryptedData = decrypt('aes-key', encryptedData);
  console.log(decryptedData); // 输出解密后的数据
}