1. Python技术站首页
  2. 其他
  3. Vue

vue 项目优雅的对url参数加密详解

• Vue

下面我将详细讲解“vue 项目优雅的对url参数加密详解”的完整攻略。

1. 为什么需要对URL参数加密？

在前端开发中，我们经常会需要将一些敏感信息或者重要参数放在URL中传递，例如用户ID、订单编号等等。而如果这些参数没有加密，在传输过程中就很容易被黑客或者攻击者窃取和篡改。因此，对URL参数加密是非常有必要的。

2. 实现方案

Vue项目优雅的对URL参数加密方案主要包括以下步骤：

2.1 加密算法的选择

针对URL参数加密的需求，我们需要选择一种非常简单、高效的加密算法。在这里我们可以采用Base64编码，它可以将任意二进制数据转换为纯文本格式，并且在传输过程中不会出现乱码的情况。

2.2 实现加密和解密函数

我们可以将加密和解密函数封装在一个工具类中，具体代码如下：

// 工具类 utils.js

// Base64加密
export function base64Encode(str) {
  const base64EncodeChars =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  let out, i, len;
  let c1, c2, c3;
  len = str.length;
  i = 0;
  out = "";
  while (i < len) {
    c1 = str.charCodeAt(i++) & 0xff;
    if (i == len) {
      out += base64EncodeChars.charAt(c1 >> 2);
      out += base64EncodeChars.charAt((c1 & 0x3) << 4);
      out += "==";
      break;
    }
    c2 = str.charCodeAt(i++);
    if (i == len) {
      out += base64EncodeChars.charAt(c1 >> 2);
      out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
      out += base64EncodeChars.charAt((c2 & 0xf) << 2);
      out += "=";
      break;
    }
    c3 = str.charCodeAt(i++);
    out += base64EncodeChars.charAt(c1 >> 2);
    out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
    out += base64EncodeChars.charAt(((c2 & 0xf) << 2) | ((c3 & 0xc0) >> 6));
    out += base64EncodeChars.charAt(c3 & 0x3f);
  }
  return out;
}

// Base64解密
export function base64Decode(str) {
  const base64DecodeChars = new Array(
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    62,
    -1,
    -1,
    -1,
    63,
    52,
    53,
    54,
    55,
    56,
    57,
    58,
    59,
    60,
    61,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    0,
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
    21,
    22,
    23,
    24,
    25,
    -1,
    -1,
    -1,
    -1,
    -1,
    -1,
    26,
    27,
    28,
    29,
    30,
    31,
    32,
    33,
    34,
    35,
    36,
    37,
    38,
    39,
    40,
    41,
    42,
    43,
    44,
    45,
    46,
    47,
    48,
    49,
    50,
    51,
    -1,
    -1,
    -1,
    -1,
    -1
  );

  let c1, c2, c3, c4;
  let i,
    len,
    out;
  len = str.length;
  i = 0;
  out = "";
  while (i < len) {
    /* c1 */
    do {
      c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
    } while (i < len && c1 == -1);
    if (c1 == -1) break;

    /* c2 */
    do {
      c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
    } while (i < len && c2 == -1);
    if (c2 == -1) break;

    out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));

    /* c3 */
    do {
      c3 = str.charCodeAt(i++) & 0xff;
      if (c3 == 61) return out;
      c3 = base64DecodeChars[c3];
    } while (i < len && c3 == -1);
    if (c3 == -1) break;

    out += String.fromCharCode(((c2 & 0xf) << 4) | ((c3 & 0x3c) >> 2));

    /* c4 */
    do {
      c4 = str.charCodeAt(i++) & 0xff;
      if (c4 == 61) return out;
      c4 = base64DecodeChars[c4];
    } while (i < len && c4 == -1);
    if (c4 == -1) break;
    out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
  }
  return out;
}

2.3 实现URL参数加密和解密函数

在工具类中，我们可以封装URL参数加密和解密函数：

// 工具类 utils.js

// 加密URL参数
export function encryptUrlParams(params) {
  const str = JSON.stringify(params);
  return base64Encode(str);
}

// 解密URL参数
export function decryptUrlParams(url) {
  const str = base64Decode(url);
  return JSON.parse(str);
}

2.4 加密URL参数后跳转到新页面

在Vue项目中，我们可以通过如下代码实现在新页面中展示已加密的URL参数：

<!-- 调用encryptUrlParams()方法对参数进行加密后生成完整的链接URL -->
<router-link :to="`/some-route?params=${encryptUrlParams(params)}`" target="_blank">跳转到新页面展示URL参数</router-link>

2.5 在新页面中解密URL参数

在新页面加载时，我们可以通过如下代码解密URL参数：

// 解密URL参数
import { decryptUrlParams } from "@/utils/utils";
const params = decryptUrlParams(this.$router.currentRoute.query.params);

3. 示例说明

3.1 示例1

比如，在一个电商网站中，用户提交一个订单后需要展示订单编号等信息，在展示页面时我们可以采用如下方式生成URL：

const params = {
  orderId: "1234567890",
  userId: "5421"
};
const url = `/order-detail?params=${encryptUrlParams(params)}`;

用户点击链接后，会在一个新的页面中展示订单编号等信息。

3.2 示例2

还可以在Vue Router的导航守卫中进行URL参数的加密和解密：

const router = new VueRouter({
  mode: "history",
  routes: [...]
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 如果目标路由的URL中包含params参数，就对其进行解密
  if (to.query.params) {
    const decryptedParams = decryptUrlParams(to.query.params);
    to.query.params = decryptedParams;
  }
  next();
});

Vue.use(VueRouter);

这个时候，我们可以在路由中直接使用普通的对象进行传递：

const params = {
  orderId: "1234567890",
  userId: "5421"
};
router.push({
  path: "/order-detail",
  query: {
    params
  }
});

在页面加载时，路由导航守卫会自动将URL参数进行解密。

总结

通过对URL参数的加密，可以有效保护敏感信息、重要参数在传输过程中不被黑客或者恶意攻击者窃取或篡改。Base64编码是一种非常简单、高效、安全的加密方式，可以很方便地实现URL参数的加密和解密操作。同时，在Vue项目中，我们可以采用封装的工具类，并将加密函数、解密函数和URL参数加密函数、URL参数解密函数分离，以实现高效、规范化的URL参数加密方案。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue 项目优雅的对url参数加密详解 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • Vue源码学习之初始化模块init.js解析

    针对“Vue源码学习之初始化模块init.js解析”的完整攻略，我将从以下几个方面进行详细讲解。 标题 本文将重点讲解Vue源码中的init.js文件，即Vue实例的初始化模块，其中包含了Vue实例在创建过程中的各种初始化操作。 代码示例 首先，让我们来看一下init.js中的代码示例： export function initState (vm: Comp…

    Vue 2023年5月28日
    00

  • Vue全局事件总线你了解吗

    当进行 Vue 项目开发时，有时需要在组件之间进行通信，常见的方式有props、自定义事件、Vuex等。除了这些方式，还可以使用Vue的全局事件总线来实现组件之间的通信。 什么是Vue全局事件总线？ Vue全局事件总线是通过Vue实例来实现的全局事件总线。Vue实例是一个事件代理，它中转和分发事件通知，从而实现各组件之间的通信。它的实现是通过创建一个Vue实…

    Vue 2023年5月29日
    00

  • Vue中在data里面调用method方法的实现

    在Vue中，我们可以在组件的data选项中定义数据，并且我们可以使用methods来定义方法。通常情况下，我们使用methods中的方法来操作组件数据。但是，有时我们需要在data中调用methods的方法。这时，可以使用this.$options.methods来访问methods中定义的方法。 下面是Vue中在data里面调用method方法的实现的完整…

    Vue 2023年5月28日
    00

  • Vue组件基础用法详解

    下面我将详细讲解“Vue组件基础用法详解”的完整攻略。 一、Vue组件基础 在Vue中，组件是可复用的Vue实例。它们接受相同的选项（例如，data，computed，mounted），并且可以有自己的模板，方法, 以及样式。组件系统提供了一种抽象，让我们可以使用独立可复用的小组件构建大型应用程序。 二、全局注册组件 全局注册一个组件，需要使用Vue.com…

    Vue 2023年5月27日
    00

  • vue3 hook重构DataV的全屏容器组件详解

    针对“vue3 hook重构DataV的全屏容器组件详解”这篇文章，我可以提供以下详细的攻略： 一、背景 这篇文章主要介绍了如何使用 Vue3 的 hook 函数来重构 DataV 的全屏容器组件，以提升代码的可读性和维护性。文章以具体的代码实现为例，从技术层面深入讲解了 hook 函数的运用和优势，包括重构前后的组件结构、组件内部使用的 hook 函数等。…

    Vue 2023年5月28日
    00

  • 浅谈Vue3.0新版API之composition-api入坑指南

    浅谈Vue3.0新版API之composition-api入坑指南 随着Vue3.0版本的发布，新版API也推出了许多新特性，其中最为引人注目的便是composition-api。如何使用新特性，帮助开发者更高效地编写Vue应用，将是本文所要探讨的内容。 什么是composition-api composition-api是Vue3.0版本全新的特性，它是一…

    Vue 2023年5月27日
    00

  • Vue3项目搭建的详细过程记录

    以下是Vue3项目搭建的详细过程记录： 步骤一：安装Node.js和npm Node.js和npm是Vue3项目开发所必需的基础环境，可以在官网下载安装。 步骤二：安装Vue CLI 4 在终端输入以下命令安装Vue CLI 4： npm install -g @vue/cli 等待安装完成后，输入以下命令检查Vue CLI是否成功安装： vue –ver…

    Vue 2023年5月27日
    00

  • vue如何搭建多页面多系统应用

    要搭建多页面多系统应用，我们需要考虑以下几个方面： 如何配置webpack多入口 如何分别打包多个页面 如何创建多个vue实例 如何在不同的页面中加载不同的组件 下面我们逐一讲解： 1. 如何配置webpack多入口 我们可以在webpack.config.js中配置entry来指定多个入口文件，示例代码如下： module.exports = { entr…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部