关于vue-router会自动将路由地址中的‘+’号变成空格这件事

917 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第3天,点击查看活动详情

前情提要

在最近的项目迭代需求中有一项是与公司另一个部门的看板项目之间的协作。需求内容是看板那边要跳转到我们这个项目中的某一个模块,然后会携带用户工号登信息,我们拿到工号之后就去找这个工号最新的相关信息然后展示出来。需求看着很简单,当然也确实很简单。但是简单的东西往往会隐藏一些小问题。

问题一:信息安全

为了保证信息安全,除了使用https,校验token以及数字签名等,还需要对传递的工号登信息做加密以及加码处理。于是他们采用了他们自己弄的一套对称加密方式,对工号进行加密。于是真正的问题快要出现了...

问题二:消失的加’+‘号

双方都进行调整之后,我方便开始了自测。另外还需要讲的是,因为是跨系统登录,所以那边跳转过来的时候需要携带秘钥等信息,然后跳转到指定的sso页面,然后经过处理再跳转到链接里指定的路由地址。好,然后问对方索要了他们的跳转地址参数后便开始了测试,经过测试,一切正常。本以为一切都结束了,但是发现一跳转成功后接口就会发出警告信息说该用户没有最新的相关信息。一开始没在意,后来发现这个人有信息,那么就有问题了,此时造成这个问题的原因只有两个:要么是对方提供的加密信息不对,要么就是我们这边的解密不对。经过在本地自己调用方法去加码,解码,加密解密,都没有问题,也就是说这两个问题都不存在。直到我发现传给我方后端的参数中少了一个加号。然后还发现在加密信息中对方提供的链接中是2BvW,但是经过跳转到最终的链接便变成了20vW。于是问题便被锁定到了我方的sso系统中,经过阅读代码逻辑,发现也没有问题。最后的最后不得不怀疑到vue-router上来,查阅源码后发现vue-router会自动将路由中的加号变成空格。

解决办法

在拿到参数传给后端之前先进行一次正则匹配将空格替换为加号,然后再给后端。因为考虑到时工号的连续性,不存在加密后人为给空格的可能性,于是这个问题便解决了。

总结

vue-router会自动将路由地址中的‘+’号变成空格,如果自己的显式传参中有加号,需要自己进行正则处理:str.replace(/\s/g, '+'),就可以了。有兴趣的小伙伴可以去看vue-router的源码就知道了。

关于问题的源码位置在:vue-roeuter/src/util/query.js 第62行

image.png