vue 中解决移动端使用 js sdk 在ios 上一直报invalid signature 的问题解决

 最近项目需求，需要一个上传多张图片的功能，但是出现的问题是在安卓端是没有问题的，但是在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()
  }
}

这样子就就解决了，这个问题一周没整出来，网上的答案格式各样，现在整理出来，希望可以帮助跟我一样的小伙伴。