vue单页面应用分享报错invalid signature签名错误

描述下问题就是vue单页面应用接入JS-SDK实现分享等功能(history模式副带的页面刷新问题和iOS、Android获取url方式不同的兼容问题)、做好微信的配置后,开始测试的时候发现除第一次进入的页面外iOS都签名失败,Android却每次都能正确签名。签名失败会导致非常尴尬的问题,分享出去就像这样:

1524757994505.jpg

因为有指定不同页面的分享,所以采用vue-router的history模式(如果使用hash模式,分享出去的地址微信会自动处理掉#后边的部分,这样分享出去的都是同一个页面,不能指定某个页面)。再看如何配置微信分享功能,官方是这样说的:

  • vue-router切换的时候 都是操作的浏览器历史记录,真实URL为第一次刚进入时的URL。每次路由变化时都重新请求下签名,签名的URL 用第一次进入时的URL。
    而history模式每次跳转利用 history.pushState API 来完成 URL 跳转而无须重新加载页面,所以在每次路由url变化时都要重新调用一次api去注入实时的配置信息。
  • 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)
我做了个简单的实验 ,在微信ios手机中有
A: http://www.xx.com、B: http://www.xx.com/B 两个页面
主页面是A页面,就一个按钮负责跳转b页面
 <router-link to="/B">跳转B页面</>
点击A页面的按钮跳到B页面
获取当前B页面的window.location.href是http://www.xx.com/B
但是用微信自带的复制链接功能复制当前页面的链接还是http://www.xx.com

所以配置里面的link一定要与你页面url一致!

根据查阅的信息据说因为这些问题几年都无法解决,所以小程序应运而生,彻底解决了已上问题

解决问题的方法

1、beforeRouteEnter解决办法参考
或者用 vue-router 的beforeEach

    vue组件中添加。

    beforeRouteEnter(to, from, next) {

          var u = navigator.userAgent;

          var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

          if (isiOS && to.path !==  location.pathname) {

                location.assign(to.fullPath) // 此处不可使用location.replace

          } else {

                next()

          }

    } 

上面的方式等于刷新了页面,但是在我的项目中需要有跳转链接的统计埋点事件,所以我刷新页面会影响我统计不到我的埋点,所以我选择了下面的方式,我到现在我都没有理解后端做了什么配置,在某个项目,是可以的,我现在的项目却没有实现,大致问了下他们的解决办法就是
在你和后端同学对接的时候,获取jsSDK这个接口拿签名串的时候,编码encodeURIComponent(当前页面的链接),给他们,他们做了一个处理就是:

if(我们是否传了当前页面的链接){
用我们是传了当前页面的链接解码后作为验签的url
}else if(当前的请求是否有reffer){
用reffer作为验签的url
}else{
用域名作为验签的url
}
然后在把验签的url返回给我们方便我们查看是否一致

但是这样解决的话,还是会有问题,就是微信ios版复制当前的链接,永远是进单页面应用的第一个链接地址
这个办法在我的项目中没有实现,所以我最终采用下面的方式,最后完美解决,就留一个小bug,微信ios版复制当前的链接永远是进单页面应用的第一个链接地址

IOS:微信IOS版,微信安卓版,每次切换路由,SPA的url是不会变的,发起签名请求的url参数必须是当前页面的url就是最初进入页面时的 Android:微信安卓版,每次切换路由,SPA的url是会变的,发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)
请求签名的url跟当前页面的url(location.href)对比明明是一样的!

解决方案:ios记录进入的第一个页面的链接window.entryUrl = location.href.split('#')[0]
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        let iosURL=''
        if (isiOS) {
            iosURL='?referer='+encodeURIComponent(window.entryUrl)

        }

继续分享的坑之旅,用第一个进入的url解决了ios上述的问题,发现又大量爆发了微信分享失效的问题,但是我抓包,开启debug模式,居然微信配置的config是ok,分享朋友debug模式也是报ok,说明我应该是可以的,but,事实是残酷的,屡次失败,我必须得找到原因,不然老大不高兴了,然后我就找,一个重大发现出来了,就是我的我打开的链接地址https://xxx.com,就是第一个页面ok,后面的也是ok,但是显示就是有问题的,但是https://xxx.com/带了斜杠的居然没有问题。我就问公众号的小哥哥,你入口的地址是不是填的https://xxx.com,果不其然
接下来,又有新的问题了,后退页面的时候config虽然配置了,但是他会用后退前的最后一个页面的分享文案

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容

  • 上两个星期做了一个公司用于推广的小活动,选择了Vue的单页面应用。【Vue单页面应用+微信网页开发】套餐赠送了超值...
    大瑜_HiJack阅读 8,448评论 5 33
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,579评论 18 139
  • 本文首发于TalkingCoder,一个有逼格的程序员社区。转载请注明出处和作者。 写在前面 本文为系列文章,总共...
    Aresn阅读 9,505评论 0 42
  • 2017年7月9号,星期日,天气:晴 今天带着于浩晨去书店给辅导班的孩子们买学习资料,到了书店这小家伙看看这本也想...
    于浩晨阅读 217评论 0 2
  • 只能共享不能复制的资源 严格实现 创建 内存管理 子类化一个单例类 alloc调用被转发给super, 意味着如果...
    饮长刀阅读 272评论 0 1