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

时间 2019-11-09

标签 vue 页面 spa history 模式调用微信 jssdk 偶尔 invalid signature 错误解决方案繁體版

原文原文链接

项目背景

vue-cli生成的单页面项目，router使用history模式。产品会在公众号内使用，须要添加微信JSSDK，作分享相关配置。javascript

遇到的问题

相关配置与JS接口安全域名都已经ok，发布后，pc端微信开发者工具与Android手机内测试分享都没问题，不管怎么跳转再分享也没问题。IOS 手机，首次到页面分享没问题，可是跳转后，就会报invalid signature 签名错误。html

就是说从【http://aaa.com/index】跳到【http://aaa.com/detail】页面，分享就会报签名错误。vue

因为此项目单页面应用，router使用history模式，url变了，可是页面也只是index.html。java

问题分析

从 A页面，跳转到B页面，因为没有刷新，B调用 JSSDK的内容，因为vue-router切换的时候都是操做的浏览器历史记录，真实url为第一次刚进入时的url。每次路由变化时都从新请求下签名，签名的url 须要用第一次进入时的url。ios

IOS：微信IOS版，每次切换路由，SPA的url是不会变的，发起签名请求的url参数必须是当前页面的url就是最初进入页面时的urlgit
Android：微信安卓版，每次切换路由，SPA的url是会变的，发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)github

解决方案

IOS 用来请求验签接口的url保存到全局变量里，跳转页面后，再调用分享接口时，用同一个url 请求。vue-router

// 记录进入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;

每次验签使用 signLink 获取vue-cli

参考连接：https://github.com/vuejs/vue-router/issues/481浏览器