Vue.js - 单页面 SPA ,IOS 端页面跳转后调用微信 JSSDK 时报错: "invalid signature" 解决方案

简介: Vue.js - 单页面 SPA ,IOS 端页面跳转后调用微信 JSSDK 时报错: "invalid signature" 解决方案

背景

1、JS接口安全域名 OK

2、Android手机,微信开发者工具,测试分享都没问题


问题

在IOS手机微信端,从A页面(http://a.com/A) 跳转到B页面(http://a.com/B)后,B页面进行分享时就会报签名(invalid signature)错误。


分析

从A页面跳转到B页面时,由于是使用vue-router切换,都是操作浏览器历史记录,所以ios端微信浏览器锁定的url的还是A页面的url。

这个时候,是不是很多人都会认为,既然页面路由变化了,那我重新请求下url签名接口,不就可以了。呵呵呵,你会发现报错:invalid signature。但是再刷新一下,又没有签名问题,这是什么原因呢???

那么你在请求url签名接口的时候,传递的url参数又是什么呢?大概如下吧:

url1、直接是 location.href (history模式)

url2、自己拼装的 location.origin + '/#' + this.$route.pullPath (hash模式)

这个时候,你请求的接口都没问题,也能拿到签名数据。但是:

问题就出在:你所请求的url签名地址和浏览器执行jweixin-1.x.x.js时锁定的地址 不一致、不一致、不一致。你当前请求的可能是url1或url2,而此时微信锁定的地址仍然是进入A页面时的url(因为在进入A页面是加载并执行了jweixin-1.x.x.js, 而路由变化A到B时,并没有再次执行jxinwei-1.x.x.js)。所以问题就发生了,但是你再刷新一下,jweixin-1.x.x.js重新执行,此时微信浏览器锁定的url就是你当前刷新的url地址了,所以签名又成功了。


主要是因为:

【IOS】:ios微信端,路由变化时,微信认为SPA的url是不变的。

【Android】:android微信端,路由变化时,SPA的url是会变的(官方在安卓6.2版本,才对SPA变化作了支持)

所以,发起签名的url必须是微信锁定的url。


解决方案

IOS端,把请求签名的url,保存到全局变量中。路由切换后,在调用分享接口时,使用全局变量里保存的url来请求签名。

// 记录进入 App 时的 URLif (typeofwindow.entryUrl==='undefined'||window.entryUrl==='') {
window.entryUrl=location.href.split('#')[0]
}
// 进行签名的时候 Android 不用使用之前的链接,IOS 需要letsignLink=/(Android)/i.test(navigator.userAgent) ?location.href.split('#')[0] : window.entryUrl;

Ps:最后,每次验签名使用 signLink 获取,就OK了。


附

以上方法是比较好的,但是要考虑各种情况的维护,这里有一种办法比较简单粗暴:就是在哪里需要调用微信JSSDK,就哪里强制再刷新该页面就行了,当然还是要借助上面提供的代码,在它的基础上。


但这时又会出现一个用户体验的问题:每每进入这个页面时,都会刷新两次,很容易看得出来。


解决方案:在最外层 div 套一个 v-if 第一次进去为 false,第二次为 true,这样就可以实现感觉只是进入页面时正常的一次刷新。


目录
相关文章
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
805 2
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
5357 1
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
497 56
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
2337 9
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
459 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
小程序 JavaScript
微信小程序中的页面跳转(通过点击按钮、调用方法的形式)
这篇文章讲解了微信小程序中页面跳转的方法,包括使用按钮点击事件和调用方法实现跳转,以及推荐使用`this.pageRouter.navigateTo`代替`wx.navigateTo`的方式。
微信小程序中的页面跳转(通过点击按钮、调用方法的形式)
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
1127 2
|
移动开发 安全 API
微信H5支付--微信JS-SDK支付--点金计划
本文详细介绍了微信H5支付和JS-SDK支付的原理、配置和开发流程,涵盖了H5支付在移动端浏览器外唤起微信支付的细节,以及JS-SDK支付在微信内置浏览器中完成支付的相关注意事项。文章还针对微信支付常见问题,提供了解决方案和代码示例。最后,文章深入解析了微信支付点金计划,包括商家小票的自定义开发、API接口以及支付成功后的页面展示逻辑,为开发者提供了完整的开发参考。
1987 0
微信H5支付--微信JS-SDK支付--点金计划
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
338 2