vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案

Posted 2021-02-10 小太阳

项目背景

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;