关于前端url加密方式总结 (Vue-cli中使用)
有的時候鏈接信息中存在敏感信息或者不想讓用戶手動修改鏈接從而改變內容，這時候就需要進行鏈接加密處理，雖然這種方式只能簡單的預防，不過還是能起到一定作用的，這里根據我的思路進行總結處理方式
首先網站頁面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 });}轉載于:https://www.cnblogs.com/sixthrhapsody/p/11377932.html
總結
以上是生活随笔為你收集整理的关于前端url加密方式总结 (Vue-cli中使用)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何进行Java 单元测试
- 下一篇： Vue 之 echarts 图表数据可视