vue-router路由中对query中的参数进行加密

源码地址在文末

在创建路由的时候，添加两个方法

stringifyQuery: 序列化传入的query参数，方法可以接收一个对象参数

在new Router的时候传递这个属性，在序列化query参数的就执行这个方法，不会执行默认的方法，序列化后在地址栏显示序列化之后的参数
parseQuery: 解析地址栏参数，方法接收一个字符串参数

在new Router的时候传递这个属性，在解析query参数的时候，回执行这个方法，不会在执行默认的方法，

注：这个方法只解析path中的参数，或者浏览器刷新的时候的地址栏的参数，不会对在query参数对处理，如：
```
```javascriptthis.$router.push({path: "foo?a=123",query: {b: 345}})
```
```
在执行这段代码的时候，parseQuery方法不会对query:{b: 345}进行解析,会解析path:"foo?a=123"中的a=123的字符串

使用方式：

例：

router/index.js

import Vue from "vue"
import VueRouter from "vue-router";
import { stringifyQuery, parseQuery } from "./utils/query";Vue.use(VueRouter);const routes = [{path: "/",name: "home",component: () => import(/* webpackChunkName: "home" */"../views/Home")},{path: "/foo",name: "foo",component: () => import(/* webpackChunkName: "foo" */"../views/Foo")},{path: "/bar",name: "bar",component: () => import(/* webpackChunkName: "bar" */"../views/Bar")}
];const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,stringifyQuery: stringifyQuery,parseQuery: parseQuery,routes
});export default router

router/utils/query.js

import { getEncryptToBase64 as encrypt, getDecryptByBase64 as decrypt } from "./encryption"
const encodeReserveRE = /[!'()*]/g
const encodeReserveReplacer = c => '%' + c.charCodeAt(0).toString(16)
const commaRE = /%2C/gconst encode = str => encodeURIComponent(str).replace(encodeReserveRE, encodeReserveReplacer).replace(commaRE, ',')const decode = decodeURIComponent/*** 序列化对象 并加密* @param {Object} obj */
export const stringifyQuery = obj => {// 序列化方法使用的vue-router中的原方法，详见vue-router/src/query.js// 唯一的修改时最后返回的时候，对参数进行了加密const res = obj ? Object.keys(obj).map(key => {const val = obj[key]if (val === undefined) {return ''}if (val === null) {return encode(key)}if (Array.isArray(val)) {const result = []val.forEach(val2 => {if (val2 === undefined) {return}if (val2 === null) {result.push(encode(key))} else {result.push(encode(key) + '=' + encode(val2))}})return result.join('&')}return encode(key) + '=' + encode(val)}).filter(x => x.length > 0).join('&') : nullreturn res ? `?${encrypt(res)}` : ''
}/*** 解密 解析 字符串参数* @param {String}} query */
export const parseQuery = query => {// 先对query进行解密// 在使用vue-router中的解析方法对query进行解析，详见vue-router/src/query.jsconst res = {}query = query.trim().replace(/^(\?|#|&)/, '')if (!query) {return res}// 解密query = decrypt(query);query.split('&').forEach(param => {const parts = param.replace(/\+/g, ' ').split('=')const key = decode(parts.shift())const val = parts.length > 0? decode(parts.join('=')): nullif (res[key] === undefined) {res[key] = val} else if (Array.isArray(res[key])) {res[key].push(val)} else {res[key] = [res[key], val]}})return res
}

router/utils/encryption.js

/** 默认在html已经引入了  crypto-js.js  文件* 或者npm install crypto-js --save 安装* 然后使用import CryptoJS from "crypto-js"* 加密 解密*/
const baseCryptoCode = "这一段文字用来做给路由加密的私钥"; // 私钥自己指定const getKeyHex = cryptoCode => CryptoJS.enc.Latin1.parse(cryptoCode || baseCryptoCode);const getIvHex = () => CryptoJS.enc.Latin1.parse(baseCryptoCode);/*** 加密* @param {String} key* @param {String} cryptoCode* @returns {string}*/
export const getEncrypt = (key, cryptoCode) => {let keyHex = getKeyHex(cryptoCode);let ivHex = getIvHex();try {key = JSON.stringify(key);} catch (e) {console.warn(e);}return CryptoJS.AES.encrypt(key, keyHex, {mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.ZeroPadding,iv: ivHex}).toString();
}export const getEncryptToBase64 = (key, cryptoCode) => {let encryptStr = getEncrypt(key, cryptoCode);let wordArray = CryptoJS.enc.Utf8.parse(encryptStr);return CryptoJS.enc.Base64.stringify(wordArray);
}/*** 解密* @param data* @returns {string}*/
export const getDecrypt = data => {let keyHex = getKeyHex();let ivHex = getIvHex();let decrypted = CryptoJS.AES.decrypt({ciphertext: CryptoJS.enc.Base64.parse(data)}, keyHex, {mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.ZeroPadding,iv: ivHex}).toString(CryptoJS.enc.Utf8);try {decrypted = JSON.parse(decrypted);} catch (e) {console.warn(e);}return decrypted
}/*** 对base64数据解密  先解析base64，在做解密* @param {String} data * @returns {string}*/
export const getDecryptByBase64 = data => {let parsedWordArray = CryptoJS.enc.Base64.parse(data);let decryptStr = parsedWordArray.toString(CryptoJS.enc.Utf8);return getDecrypt(decryptStr);
}

效果：

执行：

this.$router.push({path: "/foo",query: {foo: "App-Foo"}
})

地址栏：

http://localhost:8081/foo?c3p1R2tZK1AvVENKZTZHRzh3TFhpUT09

在刷新后解析的query

{foo: "App-Foo"}

github地址：https://github.com/wukang0718/vueRouterEncryption

vue-router路由中对query中的参数进行加密相关推荐

Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
vue 函数路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
html 刷新页面未传参数值,vue router路由参数刷新消失问题的解决方法
场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并 ...
vue动态路由传参---query传参和params传参
当一个页面跳转到另一个页面时,组件结构相同,只是内容不同且地址栏后缀不同 ,这个地址栏的后缀就是参数,根据不同参数渲染不同的内容,这个跳转就叫路由传参. 当项目中组件间通过路由跳转,有时,我们需要传递 ...
Vue.js 3.0 学习笔记（十一）Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
Vue Router 路由导航
Vue Router 通过 Vue.js,我们已经用组件组成了我们的应用.当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们. V ...

vue-router路由中对query中的参数进行加密

vue-router路由中对query中的参数进行加密

vue-router路由中对query中的参数进行加密相关推荐

最新文章

热门文章