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