vue2:路由跳转，如何将所有传参整体加密

在 Vue2 中，如果想要对路由传参进行整体加密，你可以创建一个自定义的全局守卫 (guard) 或者在每次路由跳转前处理参数。这里提供一种简单的示例，我们将使用 Babel 密码库（@nuxt/babel-plugin-syntax-decorators 和 @nuxtjs/axios 的 interceptors）来实现参数加密：

1. 首先，安装必要的依赖：

npm install --save-dev @nuxt/babel-plugin-syntax-decorators axios

2. 在 `build` 目录下创建一个 `.babelrc` 文件，添加 Babel 插件：

{
  "plugins": [
    ["@nuxt/babel-plugin-syntax-decorators", { "useBuiltIns": true }],
    "@nuxtjs/axios"
  ]
}

3. 在 `plugins` 目录下创建一个 `encryptParams.js` 文件，编写加密函数：

import crypto from 'crypto-js'

export default async function encryptParams(context, next) {
  const encryptedParams = context.params
  Object.keys(encryptedParams).forEach((key) => {
    if (typeof encryptedParams[key] === 'string') {
      encryptedParams[key] = crypto.AES.encrypt(
        encryptedParams[key],
        process.env.SECRET_KEY // 替换为你项目中的密钥
      ).toString(crypto.enc.Utf8);
    }
  });
  
  await next();
}

4. 在 `nuxt.config.js` 中启用这个插件并注册全局守卫：

export default {
  build: {
    plugins: ['encryptParams']
  },
  router: {
    middleware: ['encryptParams'] // 将加密中间件应用到所有路由上
  }
}

5. 现在，当你通过路由传递参数时，它们会被自动加密。例如，原来的路由配置可能是：

// router/index.js
{
  path: '/user/:id',
  component: () => import('@/views/User.vue'),
  meta: { requiresAuth: true }
}

加密后的路径会看起来像：

/user/:id?enc=[加密后的ID]