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

项目背景

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;

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

时间: 2024-11-05 11:42:20

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

fullpage在vue单页面当中使用会出现的问题以及解决办法

在 vue 单页面当中发现fullpage会报错,报错信息大概意思为,fullpage不允许初始化多次. 解决办法,在使用fullpage的组件跳转路由进入销毁组件之前的生命周期的时候对fullpage也进行销毁,这样就可以重新初始化一个fullpage组件了. $.fn.fullpage.destroy('all'); 在beforeDestroy这个生命周期执行,就可以了

vue单页面程序

vue单页面程序 gitHub地址:https://github.com/lily1010/vue_singlePage 举个栗子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue-router.js" type="text/javascript&qu

处理 Vue 单页面应用 SEO 的另一种思路

vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介

处理 Vue 单页面 SEO 的另一种思路

vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SE

asp.net mvc 如何调用微信jssdk接口:分享到微信朋友(圈)| 分享到qq空间

如何在asp.net mvc 项目里, 调用微信jssdk接口,现实功能: 分享到微信朋友(圈)| 分享到qq空间 1 创建一个Action,准备一些数据,初始化数据(签名): /// <summary> /// 分享的内容 /// 必须写在html的head里面才可以生效 /// </summary> /// <param name="fxUrl"></param> /// <returns></returns>

调用微信Js-SDK支付

$(document).ready(function(){ var url = location.href.split('#')[0]; $.get(rootPath + "/wechat/member/user/getWechatConfig?url=" + url,"",function(data){ wx.config({ debug: false, appId: data.appId, nonceStr: data.nonceStr, signature:

win8/win7中使用Git Extensions PuTTy模式提交时 git-credential-winstore.exe&quot;: No such file or directory 错误解决方案

参考:http://www.cnblogs.com/hlizard/p/3627792.html 报错类似以下错误 \"F:/GitExtensions/GitCredentialWinStore/git-credential-winstore.exe\" get: "F:/GitExtensions/GitCredentialWinStore/git-credential-winstore.exe": No such file or directory 解决方案

如何去除vue项目中的 # --- History模式

使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现#的出现真的很丑陋,并且也不知道这是什么作用? 所以就去Stack Overflow上搜索了,果然还有~  看来Stack Overflow是真的强大,你在项目中遇到的问题实际上在so上都已经被问过并且解决了,这不:    这是最高票的回答,即在vue2中将mode模式设置为history,试过之后确实奏效! 但是知道这样可以解决问题,却不知道为什么,这是不行的, 随着连接,我们看到了文档. 所以这篇文章也就是引申

vue 单页面应用实战

1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验. 2. 为什么选择 vue? 在选择 vue 之前,使用 reactjs 也做过一个小 Demo,虽然两者都是面向组件的开发思路,但是 reactjs 的全家桶方式,实在太过强势,而自己定义的 JSX 规范,揉和在