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

前端没钱2025-04-08 13:53

问题描述

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()格式转化