文档章节

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

o
 osc_g8254g7s
发布于 2019/08/19 16:34
字数 1141
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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

  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 });
    }
  1. 最后总结一下,如果是对安全性要求比较高在执行加密时可以换其他的方式来加密,我这里只是简单的加密了一下,让别人篡改参数不是那么很轻松 ,也直接看出url里边带的参数是什么;如果在控制台中进行解密测试,你需要执行window.decodeURIComponent这个方法两次,why?不解释,哈哈,实践一下就知道了;如果别人修改了key后边的参数,那么解析会出错,或者解析不完全,至于修改,随他改吧,看你的加密方式了;
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Vue CLI3.x 配置指南「初识Vue CLI3.x 版本」

前言 由于之前的项目中都是用的vue-cli 2.x 版本,最近新开的项目使用了vue-cli 3.x 版本的脚手架,因此总结一下笔记,方便以后查看使用。 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @v...

只会番茄炒蛋
02/22
0
0
Vue CLI3.x 配置指南「初识Vue CLI3.x 版本」

https://juejin.im/post/5e4fdd1a6fb9a07c8176106b 前言 由于之前的项目中都是用的vue-cli 2.x 版本,最近新开的项目使用了vue-cli 3.x 版本的脚手架,因此总结一下笔记,方便以后查看使用。...

osc_15vyay19
03/19
2
0
.net core 集成vue

要求 需要你的计算机安装有 • .net core 2.0以上版本 • node、webpack、vue-cli、vue (npm install 默认版本即可) • visual studio 2017/vs code 初始化.net core 项目 1. 首先打开vs ...

osc_5512k200
2018/11/19
2
0
你可能需要的一本前端小册:Vue 项目构建与开发入门

最近抽时间写了一本关于 Vue 的小册:《Vue 项目构建与开发入门》,前前后后断断续续花了大概两个月的时间。作为 Vue 的第一批用户,同时也作为一名专栏作者,虽然我之前写过好几篇关于 Vue ...

劳卜
2018/11/28
0
0
Vue.js 搭建

壹-biu 开始学习关于前端的知识,或多或少不会天天被前端的大爷虐了, 搭建一个vue项目,利用vue-cli直接create一个vue+webpack项目. vue-cli就好像IDEA建立springboot项目一样方便. 以下关于项...

大_侠
2018/06/05
39
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP控制反转和依赖注入

[TOC] PHP和依赖注入 理论知识 作者:Mingqi 链接:https://www.zhihu.com/question/23277575/answer/169698662 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明...

我爱吃炒鸡
9分钟前
8
0
Xcode 6:键盘未显示在模拟器中 - Xcode 6: Keyboard does not show up in simulator

问题: The keyboard does not show up when I run the simulator and click in the UITextView. 当我运行模拟器并单击UITextView时,键盘没有显示。 How do I re-enable the keyboard? 如何......

法国红酒甜
39分钟前
23
0
紫外线消毒灯EPA注册有请小蔡

臭氧消毒器EPA注册,紫外线消毒灯EPA注册,UV水质过滤器EPA注册,UV空气过滤器EPA注册,UV灭蚊灯EPA注册,超声驱虫设备EPA注册,UV消毒器EPA注册,高频驱鸟器EPA注册,电子驱鼠器EPA注册 二、...

IECEE证书注册
今天
11
0
小程序上传帖子(含有文字图片的微信验证)

public.js var graceJS = require('../../utils/grace.js');import { config } from '../../config.js'Page({ /** * 页面的初始数据 */ data: { imglist: [], title:'......

子枫Eric
今天
28
0
如今大火的算法框架TensorFlow,都有哪些值得一看的好书呢?

TensorFlow™是一个基于数据流编程(dataflow programming)的符号数学系统,被广泛应用于各类机器学习(machine learning)算法的编程实现,其前身是谷歌的神经网络算法库DistBelief 。 Te...

程序员知识码头
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部