关于前端url加密⽅式总结（Vue-cli中使⽤）
有的时候链接信息中存在敏感信息或者不想让⽤户⼿动修改链接从⽽改变内容，这时候就需要进⾏链接加密处理，虽然这种⽅式只能简单的预防，不过还是能起到⼀定作⽤的，这⾥根据我的思路进⾏总结处理⽅式
1. ⾸先⽹站页⾯url都有对应的不同路径组成，这个地⽅不⽤修改(当然也可以⾃⼰扩展)，后边可能会拼接⼀些参数对这串参数进⾏处理
；
思路就是在页⾯跳转前进⾏拦截修改参数部分，及在改变页⾯某些状态需要改变url内容时进⾏修改参数部分；
vue json字符串转数组
那么页⾯在重新载⼊或者进⼊时，⾸先需要进⾏对页⾯的加密参数解密到对应字段上进⾏后边的参数处理；
2. 下边是url加密和解密⽅法
/**
* url参数加密
* 传⼊json格式的串
* @param {*Object} query
*/
const EncryUrl = query => {
if (!utils.isObject(query)) {
return "";
}
try {
query = JSON.stringify(query);
query = deURIComponent(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 (st(h)) {
let v = (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的⼀个参数，当然可以换成其他的参数;
3. 然后注意在router⾥边需要处理对应的改变
// url参数加密
function encryUrlOfRouter(to, from, next) {
// 这⾥对路由参数key进⾏加密
if (Object.keys(to.query).length > 0 && !to.query.key) {
let urlEntry = EncryUrl(to.query);
if (urlEntry) {
next({
path: to.path,
query: {
key: urlEntry
}
})
return false;
}
next({
path: to.path
})
return false;
}
return true;
}
以上代码块，encryUrlOfRouter这个⽅法放在router.beforeEach⾥边执⾏，⾸先判断当前链接是否有参数，若有且如果不存在key，那么就使⽤EncryUrl进⾏处理query加密，然后修改当前链接参数，这时，router会再次执⾏⼀次；
4. 那么在页⾯中使⽤时，⾸先是初次渲染拿出数据了，在created中执⾏时可以使⽤GetQueryParamOfObjEntry来获取数据，然后对应参
数赋值；
其次是在⼀些改变url参数的操作，(场景：⽐如分页，触发分页后，把这个链接复制到其他的窗⼝中，既要让参数加密，⼜必须让这个链接打开窗⼝的分页的状态和被复制页⾯的分页⼀样)，这个时候在每次触发改变链接的时候执⾏这个⽅法就没问题了；
当然这时候并没有改变页⾯位置，也不会刷新页⾯，只是⾛了⼀遍路由，下⽅代码就是对应改变的⽅法了， searchCondition就是我存放需要改变url参数的对象
editUrlQuery() {
this.$router.push({ name: this.$route.name, query: this.searchCondition });
}
5. 最后总结⼀下，如果是对安全性要求⽐较⾼在执⾏加密时可以换其他的⽅式来加密，我这⾥只是简单的加密了⼀下，让别⼈篡改参数
不是那么很轻松，也直接看出url⾥边带的参数是什么；如果在控制台中进⾏解密测试，你需要执⾏window.decodeURIComponent这个⽅法两次，why？不解释，哈哈，实践⼀下就知道了；如果别⼈修改了key后边的参数，那么解析会出错，或者解析不完全，⾄于修改，随他改吧，看你的加密⽅式了；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。