项目背景
vue-cli
生成的单页面项目,router使用history模式
。产品会在公众号内使用,需要添加微信JSSDK
,做分享相关配置。
遇到的问题
相关配置与JS接口安全域名
都已经ok,发布后,pc端微信开发者工具
与Android
手机 内测试分享都没问题,无论怎么跳转再分享也没问题。IOS
手机,首次到页面分享没问题,但是跳转后,就会报invalid signature
签名错误。
就是说 从 【http://aaa.com/index】 跳到 【http://aaa.com/detail】 页面,分享就会报签名错误。
由于此项目单页面应用,router使用history
模式,url变了,但是页面也只是index.html
。
问题分析
从 A
页面,跳转到B
页面,由于没有刷新,B调用 JSSDK
的 内容,由于vue-router
切换的时候 都是操作的浏览器历史记录,真实url
为第一次刚进入时的url
。每次路由变化时都重新请求下签名,签名的url
需要用第一次进入时的url
。
- IOS:微信IOS版,每次切换路由,SPA的url是不会变的,发起签名请求的url参数必须是当前页面的url就是最初进入页面时的url
- Android:微信安卓版,每次切换路由,SPA的url是会变的,发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)
解决方案
IOS 用来 请求验签接口的url
保存到 全局变量里,跳转页面后,再调用分享接口时,用同一个url
请求。
// 记录进入app时的url if (typeof window.entryUrl === ‘undefined‘ || window.entryUrl === ‘‘) { window.entryUrl = location.href.split(‘#‘)[0] } // 进行签名的时候 Android 不用使用之前的链接, ios 需要 let signLink = /(Android)/i.test(navigator.userAgent) ? location.href.split(‘#‘)[0] : window.entryUrl;
原文地址:https://www.cnblogs.com/liuhan0727/p/10405390.html
时间: 2024-11-05 11:42:20