码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2019-02-20 11:18:05      阅读:537      评论:0      收藏:0      [点我收藏+]

标签:错误解决   lin   nat   历史   没有   测试   code   安全   html   

项目背景

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;

 

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

标签:错误解决   lin   nat   历史   没有   测试   code   安全   html   

原文地址:https://www.cnblogs.com/liuhan0727/p/10405390.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!