vue系列---【nodejs+express或vue项目实现url编码和解码】


开发场景:

项目A 跳转到项目B,现需要在跳转到B页面的时候把A页面cookie中存储的token通过url拼接传递,B页面获取,现在是在A页面中,token自动编码存到cookie(正常不会自动编码的),现在在跳转之前要取出token,取出的token是自动解码过的(是原始数据),然后拼到url上,发现url中的token跟原始数据不一致,原因是因为在url上浏览器并不能识别一些&等特殊符号,浏览器解析url乱码。

#想要请求的地址
window.open(localhost:9000/#/uploadZip?user=biaozhu&token=036ba41a7cab508759623936261800&&&2626biaozhu, '_blank')
#真正访问的地址,显然1800&解析错误
localhost:9000/#/uploadZip?1800&user=biaozhu&token=036ba41a7cab50875962393626&&2626biaozhu

解决思路:

在拼接数据前就把可能含有特殊字符的参数编码(最好把所有参数编码),避免&等特殊字符不被浏览器识别造成参数解析乱码,在新的页面解码获取就可以了。

解决方法:

在A页面获取token是给编码之后拼接到url上(token编码)

window.open(`localhost:8080/file-upload/#/uploadFile?user=${$.cookie('pin')}&token=${encodeURIComponent($.cookie('token'))}`, '_blank')

在B页面获取token解码(token解码)

// 获取到的token放到cookie中
document.cookie = `token=${this.getTokenStr()};path=/;maxAge=${30* 60}`;
 
// 获取token
getTokenStr () {
   let token = decodeURIComponent(window.location.href.split('?')[1].split('=')[2])
   return token;
},
在nodejs+express或vue框架中, 编码和解码直接用就行,框架内置。