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页面
 跳转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虽然配置了，但是他会用后退前的最后一个页面的分享文案