关于前端url加密方式总结 (Vue-cli中使用)

有的时候链接信息中存在敏感信息或者不想让用户手动修改链接从而改变内容，这时候就需要进行链接加密处理，虽然这种方式只能简单的预防，不过还是能起到一定作用的，这里根据我的思路进行总结处理方式

1. 首先网站页面url都有对应的不同路径组成，这个地方不用修改(当然也可以自己扩展)，后边可能会拼接一些参数对这串参数进行处理 ；

   思路就是在页面跳转前进行拦截修改参数部分，及在改变页面某些状态需要改变url内容时进行修改参数部分；

   那么页面在重新载入或者进入时，首先需要进行对页面的加密参数解密到对应字段上进行后边的参数处理；

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

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后边的参数，那么解析会出错，或者解析不完全，至于修改，随他改吧，看你的加密方式了；