摘要：路由守衛(wèi)內(nèi)觸發(fā)更新簽名獲取真實(shí)有效微信簽名此處需要自行處理在路由守衛(wèi)內(nèi)更新簽名，保證是使用當(dāng)前頁(yè)面，是使用目標(biāo)路由完整地址再加上域名使用簽名調(diào)用在使用的頁(yè)面通過(guò)取出緩存的微信簽名，然后進(jìn)行簽名。

手機(jī)型號(hào)：

型號(hào)：iphone 7 / iphone xs max
版本：ios 10.3.1 / ios 12.1
微信版本：WeChat 6.7.3

問(wèn)題還原：

Vue應(yīng)用(vue-router)上使用history模式，在某個(gè)頁(yè)面內(nèi)調(diào)用微信JSSDK相關(guān)API，如掃碼、分享等，使用當(dāng)前頁(yè)面URL總會(huì)出現(xiàn)簽名錯(cuò)誤(invalid signature)，導(dǎo)致API調(diào)用失敗。

Vue-Router進(jìn)行路由切換的時(shí)候，總是會(huì)操作瀏覽器的歷史記錄，從而響應(yīng)頁(yè)面URL變化。

在JSSDK文檔頁(yè)面有這么一句話:

同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗，此問(wèn)題會(huì)在Android6.2中修復(fù)

但根據(jù)多次測(cè)試情況來(lái)看，情況恰好相反，在Android下直接使用 window.location.href 得出的URL進(jìn)行簽名是完全沒(méi)問(wèn)題(可能已升級(jí)至Android6.2以上版本)，在IOS上就不行了。

這是因?yàn)樵贗OS上，無(wú)論路由切換到哪個(gè)頁(yè)面，實(shí)際真正有效的的簽名URL是【第一次進(jìn)入應(yīng)用時(shí)的URL】。

比如進(jìn)入應(yīng)用首頁(yè)是: https://m.app.com，需要使用JSSDK的頁(yè)面A是：https://m.app.com/product1/123，無(wú)論從首頁(yè)進(jìn)入到A頁(yè)面之前，中間跳轉(zhuǎn)過(guò)多少次路由，最終簽名有效的URL還是首頁(yè)URL。

直接粗暴處理方式:

在進(jìn)入需要使用JSSDK頁(yè)面(B)的前一個(gè)頁(yè)面(A)，即 A > B，直接使用 window.location.href 或 window.open 打開B頁(yè)面，此時(shí)因?yàn)锽頁(yè)面是直接刷新方式進(jìn)入，所以當(dāng)前B頁(yè)面URL無(wú)論IOS或Android都是可以直接拿來(lái)簽名的。

這種方式處理缺點(diǎn)也很明顯，如頁(yè)面刷新抖動(dòng)太厲害不夠平滑過(guò)渡，再比如B頁(yè)面需要從vuex中取出緩存信息，如果這些緩存信息不是通過(guò)vuex保存在localstorage的話，取出來(lái)的肯定都是空的。

思路：既然IOS僅可使用第一次進(jìn)入應(yīng)用的URL來(lái)簽名，那么在vuex上緩存一個(gè)微信簽名URL，IOS保存第一次進(jìn)入應(yīng)用的URL，Android則緩存為每個(gè)頁(yè)面的URL。簽名時(shí)，直接從緩存拿出簽名URL來(lái)處理。

// 全局判斷是否IOS方法
function isIos(){
  const u = navigator.userAgent;
  return u.indexOf("iPhone") > -1 || u.indexOf("Mac OS") > -1;
}

1. 定義vuex緩存

...

{
  state: {
    wechatSignUrl: ""
  },
  
  mutations: {
    setWechatSignUrl(state, wxSignUrl) {
      // 關(guān)鍵點(diǎn)
      // IOS僅記錄第一次進(jìn)入頁(yè)面時(shí)的URL
      // IOS微信切換路由實(shí)際URL不變，只能使用第一進(jìn)入頁(yè)面的URL進(jìn)行簽名
      if (isIos() && state.wxSignUrl !== "") {
        return;
      }
      state.wxSignUrl = wxSignUrl;
    }
  },
  
  getters: {
    getWechatSignUrl: (state) => state.wxSignUrl
  }
}

...

關(guān)鍵點(diǎn)在于設(shè)置更新微信簽名URL判斷的地方：首次進(jìn)入應(yīng)用頁(yè)面的時(shí)候肯定會(huì)觸發(fā)更新，若是IOS且簽名URL已經(jīng)設(shè)置過(guò)了，那么就不需要更新設(shè)置了，只要不退出或刷新應(yīng)用，緩存永遠(yuǎn)都會(huì)是首次進(jìn)入頁(yè)面URL。

2. 路由守衛(wèi)內(nèi)觸發(fā)更新簽名URL

import store form "@/stores"

// 獲取真實(shí)有效微信簽名URL
function getWechatSignUrl(to){
    if(isIos()) {
      return window.location.href;
    } else {
      // 此處$appHost需要自行處理
      return $appHost + to.fullPath
    }
}

...
$router.beforeEach((to, from, next) => {
    store.commit("setWechatSignUrl", getWechatSignUrl(to));    
})
...

在路由守衛(wèi)內(nèi)更新簽名URL，保證IOS是使用當(dāng)前頁(yè)面URL，Android是使用目標(biāo)路由完整地址再加上域名

3. 使用簽名URL調(diào)用JSSDK API

在使用JSSDK API的頁(yè)面通過(guò)vuex取出緩存的微信簽名URL，然后進(jìn)行簽名。

比如：

import store form "@/stores"

...
{
  methods: {
   initWechatShareConfig() {
     const that = this;
     const wxSignUrl = store.getters["getWechatSignUrl"];
     const wxShareConfigs = {
        // 微信分享配置
     }

     // 初始化微信分享
     $wechat.share(wxSignUrl, wxShareConfigs);
   }
  }
}
...

$wechat.share 是根據(jù)JSSDK文檔二次封裝的分享方法，內(nèi)部是根據(jù)wxSignUrl先進(jìn)行簽名，然后再調(diào)用分享API