网站开发流程管理,上海羽贝网站建设,百度指数爬虫,搜狗seo快速排名公司有的时候链接信息中存在敏感信息或者不想让用户手动修改链接从而改变内容#xff0c;这时候就需要进行链接加密处理#xff0c;虽然这种方式只能简单的预防#xff0c;不过还是能起到一定作用的#xff0c;这里根据我的思路进行总结处理方式 首先网站页面url都有对应的不同… 有的时候链接信息中存在敏感信息或者不想让用户手动修改链接从而改变内容这时候就需要进行链接加密处理虽然这种方式只能简单的预防不过还是能起到一定作用的这里根据我的思路进行总结处理方式 首先网站页面url都有对应的不同路径组成这个地方不用修改(当然也可以自己扩展)后边可能会拼接一些参数对这串参数进行处理 思路就是在页面跳转前进行拦截修改参数部分及在改变页面某些状态需要改变url内容时进行修改参数部分 那么页面在重新载入或者进入时首先需要进行对页面的加密参数解密到对应字段上进行后边的参数处理下边是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的一个参数当然可以换成其他的参数;然后注意在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会再次执行一次 那么在页面中使用时首先是初次渲染拿出数据了在created中执行时可以使用GetQueryParamOfObjEntry来获取数据然后对应参数赋值 其次是在一些改变url参数的操作(场景比如分页触发分页后把这个链接复制到其他的窗口中既要让参数加密又必须让这个链接打开窗口的分页的状态和被复制页面的分页一样)这个时候在每次触发改变链接的时候执行这个方法就没问题了当然这时候并没有改变页面位置也不会刷新页面只是走了一遍路由下方代码就是对应改变的方法了 searchCondition就是我存放需要改变url参数的对象 editUrlQuery() {this.$router.push({ name: this.$route.name, query: this.searchCondition });} 最后总结一下如果是对安全性要求比较高在执行加密时可以换其他的方式来加密我这里只是简单的加密了一下让别人篡改参数不是那么很轻松 也直接看出url里边带的参数是什么如果在控制台中进行解密测试你需要执行window.decodeURIComponent这个方法两次why不解释哈哈实践一下就知道了如果别人修改了key后边的参数那么解析会出错或者解析不完全至于修改随他改吧看你的加密方式了转载于:https://www.cnblogs.com/sixthrhapsody/p/11377932.html
