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使用watch监听数组或对象

    当我们想要监听Vue实例中的属性变化时，我们往往会使用watch来完成，这是Vue提供的强大特性之一。但是，当我们需要监听Vue实例中的数组或对象的变化时，watch就会显得有些无力了。那么，如何使用watch来监听数组和对象的变化呢？在本文中，我将详细讲解Vue如何使用watch监听数组或对象。 监听数组 当我们需要监听一个数组时，Vue提供了一个特殊的方…

    Vue 2023年5月28日
    00

  • vue中后端做Excel导出功能返回数据流前端的处理操作

    为了实现Vue中后端做Excel导出功能返回数据流前端的处理操作，我们需要在后端生成Excel文件，并将其返回给前端，前端再将返回的数据流进行处理，以生成Excel文件。具体的步骤如下所述： 后端生成Excel文件 我们可以使用开源的Excel处理库，在后端生成Excel文件。例如，我们可以使用phpspreadsheet这个库来生成Excel文件。首先，需…

    Vue 2023年5月27日
    00

  • VUE的tab页面切换的四种方法

    VUE 是一款流行的 JavaScript 前端框架，用于构建交互式用户界面。在 VUE 中，tab 页面切换是常见的功能，以下是 VUE 中实现 tab 切换的四种方法的完整攻略。 1. 标准的 VUE 动态组件方法 我们可以使用标准的 VUE 动态组件方法，在模板中设置一个变量，然后根据变量的值确定要显示的组件。这种方法需要我们在 VUE 组件中定义所有…

    Vue 2023年5月27日
    00

  • 一文带你详细了解Vue中的v-for

    一文带你详细了解Vue中的v-for 介绍 Vue.js 是一个流行的前端框架，它提供了一个强大的指令，即 v-for。使用 v-for 可以轻松地在 Vue 中循环渲染一个数据数组或对象的属性列表。 基础语法 一个基本的 v-for 呈现元素的语法如下所示： <ul> <li v-for="(item, index) in it…

    Vue 2023年5月27日
    00

  • Vue中导入excel文件的两种方式及使用步骤

    下面是“Vue中导入Excel文件的两种方式及使用步骤”的完整攻略。 方式一：使用ExcelJS库 ExcelJS是处理Excel文件的JavaScript库，可以在Vue中使用它来导入Excel文件。 步骤一：安装ExcelJS npm install exceljs –save 步骤二：引入ExcelJS import ExcelJS from ‘ex…

    Vue 2023年5月28日
    00

  • JS 图片压缩原理与实现方法详解

    JS 图片压缩原理与实现方法详解 原理介绍 图片压缩是指在保证图片质量的前提下，通过降低图片的分辨率、压缩比率等方式来减小图片的体积，从而达到优化页面加载速度的目的。在网页中，对于图片的大小不同，会直接影响页面的加载速度，特别是对于移动端的用户体验更加重要。 在实现 JavaScript 图片压缩的时候，常见的有两种方式： HTML5 的 Canvas + …

    Vue 2023年5月28日
    00

  • ant-design-vue中的table自定义格式渲染解析

    Ant Design Vue 是 Ant Design Pro 的 Vue 封装，其中包含了非常丰富强大的组件库。其中，Table 组件是常用的组件之一，在使用时经常需要对数据格式进行处理，这时就需要用到自定义格式渲染。本篇攻略将详细介绍在 Ant Design Vue 中如何进行 Table 的自定义格式渲染。 Step 1: 安装依赖包 在开始使用 An…

    Vue 2023年5月27日
    00

  • Vue.js标签页组件使用方法详解

    简述Vue.js标签页组件的作用和功能 Vue.js标签页组件是Vue.js框架中一种用于实现标签页切换功能的组件。它能够方便地实现标签页的切换功能，并支持动态添加或删除标签页的功能。 安装Vue.js标签页组件 Vue.js标签页组件可通过npm或yarn进行安装，如下所示： npm install vue-tabs-component –save ya…

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