vue 中解決移動端使用 js sdk 在ios 上一直報invalid signature 的問題解決

標籤：需求   signature   htm   項目   and   user   roi   location   class   

 最近項目需求，需要一個上傳多張圖片的功能，但是出現的問題是在安卓端是沒有問題的，但是在ios上一直都是 invalid signature，但是重新整理頁面就沒有問題了。

Vue主打，router使用history模式，外加JSSDK套餐

 

排查了各種情況總是找不出原因，而且神奇的是在安卓上可以正常擷取位置，就只是在ios上一直“invalid signature”，列印出來的當前url跟簽名的url也明明是一致的，為什麼還是簽名有問題呢！！？？？

頁面的結構如下：

SPA：

• 頁面A
• 頁面B

非常簡單，整個應用從A進入，然後跳轉到B，B需要擷取位置，我也只是在B裡面配置的JSSDK，然後就遇到了前面所說的問題。然後！！關鍵來了！！在某一次調試的時候，我就直接從B頁面重新整理了，然後就可以了！！！！！What the fu*k？！！

從B重新整理載入的每一次都是那麼絲滑，而從A到B，每一次都被槍斃，所以抱著這個問題，我來到了這個新世界 ---- 關於html5-History模式在瀏覽器內的問題

原來，是醬紫？！！

IOS：IOS版，安卓版，每次切換路由，SPA的url是不會變的，發起簽章要求的url參數必須是當前頁面的url就是最初進入頁面時的url

Android：安卓版，每次切換路由，SPA的url是會變的，發起簽章要求的url參數必須是當前頁面的url(不是最初進入頁面時的)

坑爹啊！虧我把請求籤名的url跟當前頁面的url（location.href）對比明明是一樣的！

 

解決方案 

 

判斷是不是ios或者是安卓 然後在  beforeRouteEnter 做操作。

 

beforeRouteEnter (to, from, next) {
  var u = navigator.userAgent;
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
  // XXX: 修複iOS版HTML5 History相容性問題
  if (isiOS && to.path !== location.pathname) {
    // 此處不可使用location.replace
    location.assign(to.fullPath)
  } else {
    next()
  }
}

這樣子就就解決了，這個問題一周沒整出來，網上的答案格式各樣，現在整理出來，希望可以協助跟我一樣的小夥伴。

 

vue 中解決移動端使用 js sdk 在ios 上一直報invalid signature 的問題解決