Vue 存在二级路由时 IOS验证 微信JS-SDK报无效的签名（Invalid signature）安卓正常

问题描述

vue项目中存在二级路由访问的页面，在某二级页面下调起微信JSSDK相关API，如扫一扫等工具时，在ios系统下，js-sdk验证签名失败（Invalid signature），导致调起工具失败，可在Android系统下是正常。vue路由采用hash模式。

问题原因

Android系统下，vue路由变换时，浏览器中的当前路径都是会变的，而IOS系统只会保留第一次进入的页面地址，之后不管路由如何切换，都不会再更新浏览器中的历史路径。故在验证JSSDK时，IOS系统只需在最初始时验证一次，而Android系统需要在每个使用到JSSDK工具的页面中都验证一遍。如果存在二级路由，当需要使用JSSDK的页面是二级子页面，IOS会验证失败的原因是，IOS中真正有效的签名URL是第一次进入应用时的URL。比如进入首页是http://first.com，需要使用JSSDK的压面是http://first.com/second/useSdkPage，从首页到这个实际使用sdk的页面中间，不管经过多少路由切换，IOS只认首页的URL签名验证。

解决方案

在验证签名时，根据当前系统做下判断：

# 获取系统类型 ios 和 android
var u = navigator.userAgent
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr')

在验证jssdk时，如果是IOS系统，且vue路由时hash模式，将取当前路径 # 号前的路径去验证，如果是Android，直接使用当前路径即可。这样就可以确保两个系统下，都可验证成功。

# IOS系统 JSSDK验证时使用的URL参数
window.location.href.split('#')[0]

# Android系统 JSSDK验证是使用的URL参数
window.location.href