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的一个参数，当然可以换成其他的参数;