Vue 路由传参加密的示例代码

下面我将详细讲解“Vue 路由传参加密的示例代码”的完整攻略。

1. 添加 crypto-js 库

首先我们需要引入一个加密解密库：crypto-js。可以使用 npm 或者通过 CDN 引入。

<!-- 通过 CDN 引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>

2. 创建加密函数

在路由跳转时，将参数进行加密。我们可以自己定义一个加密函数，示例代码如下：

import CryptoJS from 'crypto-js'

/**
 * 参数加密函数
 * @param {Object} params - 需要加密的参数对象
 * @param {String} key - 密钥
*/
function encryptParams(params, key) {
  const nonceStr = Math.random().toString(36).substr(2, 15)
  const timestamp = new Date().getTime().toString()
  const jsonStr = JSON.stringify(params)
  const sign = CryptoJS.MD5(`${nonceStr}${timestamp}${key}${jsonStr}`).toString()

  return {
    nonceStr,
    timestamp,
    sign: sign.toUpperCase(),
    params: encodeURIComponent(jsonStr)
  }
}

该函数接收两个参数，分别为需要加密的参数对象和密钥。函数内部会生成一个随机字符串 nonceStr 和一个时间戳 timestamp，并将参数对象进行 JSON 序列化。然后使用 CryptoJS 库中的 MD5 方法对组合字符串进行加密，拼接加密后的字符串和其他参数，并将 params 进行 URL 编码。最后将加密后的参数以对象形式返回。

3. 创建解密函数

在路由接收到加密的参数后，需要进行解密操作。我们同样可以创建一个解密函数，示例代码如下：

import CryptoJS from 'crypto-js'

/**
 * 参数解密函数
 * @param {Object} params - 需要解密的参数对象
 * @param {String} key - 密钥
*/
function decryptParams(params, key) {
  const { nonceStr, timestamp, sign, params: encodedParams } = params
  const decodedParams = decodeURIComponent(encodedParams)
  const signStr = CryptoJS.MD5(`${nonceStr}${timestamp}${key}${decodedParams}`).toString().toUpperCase()

  if (signStr !== sign) {
    throw new Error('参数签名错误')
  }

  return JSON.parse(decodedParams)
}

该函数接收两个参数，分别为需要解密的参数对象和密钥。函数内部将参数对象中的 nonceStr、timestamp、sign 和 params 进行解构，然后对 params 进行 URL 解码，并使用 CryptoJS 库中的 MD5 方法对组合字符串进行加密，得到一个签名 signStr。最后将 signStr 与参数对象中的 sign 进行比对，如果不相等则抛出异常。

4. 路由参数加密

在进行路由跳转时，我们需要将参数进行加密，示例代码如下：

import { encryptParams } from '@/utils'

const params = {
  name: '张三',
  age: 18
}
const key = 'your_secret_key' // 密钥需自行设置

const encryptedParams = encryptParams(params, key)

this.$router.push({
  path: '/user',
  query: encryptedParams
})

在跳转路由时，先将需要传递的参数封装成一个对象 params，然后调用 encryptParams 函数进行加密，得到一个加密后的参数对象 encryptedParams。最后通过 $router.push 跳转路由，并将加密后的参数通过 query 属性进行传递。

5. 路由参数解密

在接收到路由参数时，需要进行解密操作，示例代码如下：

import { decryptParams } from '@/utils'

export default {
  mounted() {
    const key = 'your_secret_key' // 密钥需自行设置
    const decryptedParams = decryptParams(this.$route.query, key)

    console.log(decryptedParams)
  }
}

在接收到路由参数后，先将密钥进行定义，并调用 decryptParams 函数进行解密操作，得到解密后的参数对象 decryptedParams。最后可以在控制台中打印该参数对象。