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;

每次驗簽使用 signLink 獲取

參考鏈接 :https://github.com/vuejs/vue-router/issues/481


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM