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 时的 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;

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

 

附

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

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

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