vue实现浏览器跳转真实URL隐藏的方法

在这里插入图片描述

背景

公司第一季度需求中有一段关于浏览器URL地址隐藏的需求如下:

需将系统的URL地址需要进行加密处理。

a)IP地址后面的信息需要控制为不能按照意思猜到或者改变页面内容,不能把一些参数的名称和值都在URL地址栏中暴露出来,需以不可表意的乱码展示;

b)加密后的链接复制后不能打开同一页面,且同一功能每次打开时的URL链接需不同;

以上描述总结下来共有以下几个规则:

  1. IP地址后的路径需要乱码显示
  2. 加密后的URL复制后不能在新标签跳转成功
  3. 同一功能跳转地址URL不能相同

思路和实现

我刚开始想法是用iframe实现,隐藏顶层地址。但是这个有点前端基础的都知道在DOM中可以看到地址,这么做无疑在欺骗自己,所以Pass。

第二个想法是能不能做得和短地址服务一样,这个得先把所有地址路径做个映射保存起来,通过这个短地址获取正确的地址,然后再跳转。但是这个有几个难点,第一个是系统中路由非常多,要全部实现映射关系无疑非常难,第二个是如果这样做就违背了同一功能跳转地址URL不能相同的原则,所以Pass。

最后想了下,如果要满足第三个点同一功能跳转地址URL不能相同,就需要在访问的时候进行乱码加密,而且得满足浏览器刷新、前进、后退这些操作能通过乱码取到真实地址。

完成这个需求开发,主要有两个重点,第一个是没在系统内部进行修改而是在vue-router框架内部进行修改的,第二个是javascript中BOM可以通过修改location.hash而改变当前URL的hash地址,重要的是修改这个值可以改变URL地址但是不跳转。

最后说下实现方法,首先vue-router是可以获取到当前URL地址的,然后将获取到的地址和登录人uuid通过加密生成fullPath的加密地址,随机生成一个32位乱码tempPath,然后通过location.hash=tempPath就更改了URL的hash值,也就更改了URL地址,但是地址跳转是对的。此时就造成循环,点击新功能,vue-router获取到当前真实地址,跳转,然后加密并改变URL的hash。

但是有个问题,如果刷新页面如何从乱码中找到对应的正确地址呢?所以需要把两个值tempPath和fullPath保存在sessionStorge中,然后刷新的时候通过url截取到hash如果和sessionStorge中的tempPath相同则取到fullPath,然后在路由守卫beforeEach中通过将fullPath解密获取到真实路径,然后再跳转到真实路径。可能你会问,为啥不是localStorge,原因是为了满足规则2(加密后的URL复制后不能在新标签跳转成功),sessionStorge只在当前标签页中有效,这样你复制地址然后在新页签中跳转就获取不到sessionStorge中的tempPath,也就跳转不了。

刷新操作是实现了,但是后退前进操作呢?我需要在vue-router中设置一个存储历史的机制。

我是这么做的,通过给vue-router中设置一个全局数组,这个数组保存了tempPath和fullPath,这样前进和后退操作就实现了。你以为这样就好了?太天真了,如果刷新页面全局数组就丢失了,GG。想来想去都必须要在浏览器中设置一个缓存,保证刷新操作数据不会丢失,但是如果放到sessionStorge中也太难受了,也不好放。最后发现每个标签页是有个location.history对象的,vue-router本质上也是操作window.history.pushState和replaceState实现跳转的,刚好这个pushState和replaceState有个state对象可以保存在当前页签中,只要这个页签(新页签不行)地址不变,这个数据就一直存在。那么刷新前进后退都可以通过这个history.state获取到fullPath,然后解密跳转。

最后实现的效果是这样的,先获取sessionStorge中的fullPath,如果没有就获取全局数组中的fullPath,还没有就获取history对象中的数据。

总结

做完后其实感觉直接利用location.hash和location.history就可以直接实现,还不用通过tempPath获取fullPath,简直完美。

说了这么多感觉一半都是废话,如果开始的时候直接用location.history哪有这么多坑,所以平时js还是要多多总结的,关键时候就用到了。思维方式也是要改变的,不能只关注系统本身而忽略了用到的框架、插件甚至IDE,要习惯在框架源码上做事情,这样就有可能起到事半功倍的效果。如果不了解vue-router源码这个需求真不知道如何下手。

最后代码就不贴了,如果有问题可以找我。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页