項目背景
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
獲取