Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说vue如何使浏览器url固定_关于前端url加密方式总结 (Vue-cli中使用)[亲测有效],希望能够帮助你!!!。
下边是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的一个参数,当然可以换成其他的参数;