vue 單頁面(SPA) history模式調用微信jssdk 跳轉後偶爾 "invalid signature"錯誤解決方案

時間 2019-11-09

標籤 vue 頁面 spa history 模式調用微信 jssdk 偶爾 invalid signature 錯誤解決方案简体版

原文原文鏈接

項目背景

vue-cli生成的單頁面項目，router使用history模式。產品會在公衆號內使用，須要添加微信JSSDK，作分享相關配置。javascript

遇到的問題

相關配置與JS接口安全域名都已經ok，發佈後，pc端微信開發者工具與Android手機內測試分享都沒問題，不管怎麼跳轉再分享也沒問題。IOS 手機，首次到頁面分享沒問題，可是跳轉後，就會報invalid signature 簽名錯誤。html

就是說從【http://aaa.com/index】跳到【http://aaa.com/detail】頁面，分享就會報簽名錯誤。vue

因爲此項目單頁面應用，router使用history模式，url變了，可是頁面也只是index.html。java

問題分析

從 A頁面，跳轉到B頁面，因爲沒有刷新，B調用 JSSDK的內容，因爲vue-router切換的時候都是操做的瀏覽器歷史記錄，真實url爲第一次剛進入時的url。每次路由變化時都從新請求下簽名，簽名的url 須要用第一次進入時的url。ios

IOS：微信IOS版，每次切換路由，SPA的url是不會變的，發起簽名請求的url參數必須是當前頁面的url就是最初進入頁面時的urlgit
Android：微信安卓版，每次切換路由，SPA的url是會變的，發起簽名請求的url參數必須是當前頁面的url(不是最初進入頁面時的)github

解決方案

IOS 用來請求驗籤接口的url保存到全局變量裏，跳轉頁面後，再調用分享接口時，用同一個url 請求。vue-router

// 記錄進入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;