uni-app使用web-view传参的坑

问题描述

uni-app开发的一个页面,需要点击时跳转到PC端后台的一个详情页,所以需要传参如下:

  • ticketId
  • ticketCode
  • token(用于自动登录,校验身份的)

但是吧,如果你明文传token,容易导致token泄露,所以要对token进行加密,但是加密后传参过去,PC端接收的参数值却变了!

错误方法

我的传参方式如下:

ini 复制代码
const token = getToken()
const encryptToken = Encrypt(token)
const webUrl = 'http://xxx.xxx.xx.xxx:3100/#/zypPreivew'
const url = `${webUrl}?ticketType=${type}&ticketId=${id}&token=${encryptToken}`
const enCodeUrl = encodeURIComponent(url)
uni.navigateTo({
  url: '/components/webView/index?url=' + enCodeUrl,
})

可以看到,我在传参的时候,对整个url进行了encodeURIComponent编码,这是为了符合URL传参规范,其中的加密后的token值encryptToken为: yfNRA/Ob6bVmsd+UCmqQ8fOM1dmULMpUFKvd50SX9CwRCfqad3597RgHWLznXRLG

但是我在PC端打印vue的路由参数时,得到的却是这样的

得到的token值中有一个空格,我看了fullPath中有一个%20

我们知道,encodeURIComponent编码的对应值如下:

特殊符号 编码后的值
空格 %20
! %21
# %23
+ %2B

也就是说,vue的路由把"+"解析成了空格,这就导致我解密失败了。

解决过程

但是我一想,vue这么成熟的一个框架,怎么会出错呢,肯定是我自己出错了。

于是我试着给web-view参数url中的每一个参数都使用encodeURIComponent编码,也就是把上面的那行代码加一个转化

typescript 复制代码
const url = `${webUrl}?ticketType=${encodeURIComponent(type)}&ticketId=${encodeURIComponent(id)}&token=${encodeURIComponent(encryptToken)}`

然后我们看到打印的this.$route正常了

总结

在类似于web-view编码传参时,如果只是简单类型的参数,可以只加一层encodeURIComponent()转化,如果参数中包含特殊符号,每个参数最好都加一个encodeURIComponent()格式转化

相关推荐
eric*16883 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼19 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路40 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶2 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671982 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js