vue如何使浏览器url固定_关于前端url加密方式总结 (Vue-cli中使用)[亲测有效]

Vue (121) 2023-03-27 19:58

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说vue如何使浏览器url固定_关于前端url加密方式总结 (Vue-cli中使用)[亲测有效],希望能够帮助你!!!。
vue如何使浏览器url固定_关于前端url加密方式总结 (Vue-cli中使用)[亲测有效]_https://bianchenghao6.com/blog_Vue_第1张

下边是url加密和解密方法

/**

* url参数加密

* 传入json格式的串

* @param {*Object} query

*/

const EncryUrl = query => {

if (!utils.isObject(query)) {

return "";

}

try {

query = JSON.stringify(query);

query = window.encodeURIComponent(query);

return window.btoa(query); // 编码

} catch (err) {

console.log('%c url-encry-error:' + JSON.stringify(err), 'color:red;');

}

return "";

}

/**

* url参数解密

* 传入加密的json串

* @param {*string} val

*/

const DecryptUrl = val => {

if (!utils.isString(val)) {

return false;

}

try {

let decryStr = window.atob(val); // 解码

return window.decodeURIComponent(decryStr);

} catch (err) {

console.log('%c url-decry-error:' + JSON.stringify(err.stack), 'color:red;');

}

return false;

}

以上,加密方法EncryUrl,首先判断传入的数据是否是Object的,然后把json转成字符串,使用encodeURIComponent进行URI编码(encodeURIComponent方法执行,让浏览器能够接受和理解,若中文在使用后边的window.btoa会报错),然后使用window.btoa再次转换输出;解密DecryptUrl,以同样的方式反过来执行进行解密,至于为什么后边没有使用JSON.parse,看后边的;

/**

* 从地址栏获取指定参数值

* @param {*string} param

*/

const GetQueryParam = (param) => {

let h = window.location.href;

let reg = new RegExp("[\?\&]?" + param + "=([,-\w]+)[\&]?", "i");

if (reg.test(h)) {

let v = reg.exec(h)[1];

return v;

}

return "";

};

/**

* 返回 地址栏 加密 Object

* @param {*string} param

*/

const GetQueryParamOfObjEntry = () => {

let keyStr = GetQueryParam("key");

if (!keyStr) {

return "";

}

try {

let objStr = DecryptUrl(keyStr);

let obj = JSON.parse(objStr);

return obj;

} catch (err) {

console.log('%c url-json-parse-error:' + JSON.stringify(err.stack), 'color:red;');

}

return "";

}

上边的两个方法,GetQueryParam是封装了获取指定链接参数的代码块,GetQueryParamOfObjEntry是获取以key这个指定参数后方的解密数据,这里可以看到有JSON.parse这个方法,因为我这里约定了链接后方参数是以key为key的一个参数,当然可以换成其他的参数;

发表回复