vue history 微信jssdk授权失败解决办法

bug再现：

前提保证后端签名都正确，我的是正确的，前端时不时会出现授权失败的情况。

IOS微信访问vue history模式的页面，

A页面，需要微信授权，调用jssdk使用扫描二维码接口，打开方式：直接从url进入或者别的页面进入。

B页面，支付页，打开方式：需要从别的页面进入。

直接访问A页面：微信授权正常扫一扫正常使用。从别的页面进入A页面，授权失败，提示【invalid signature】。

B页面一直正常。

问题原因：

ios的微信在vue使用history模式时，当前的“地址栏”的url不是真实的当前页面的URL，而是第一次进入的url，也就是说，

当用户在操作页面的时候，无论进了几个页面，跳转到哪里，当前页面是什么，当前地址栏的url始终是第一次进入的url。

解决办法：

在vue-router的index.js里

router.afterEach(async (to, from) => {

  if (window.__wxjs_is_wkwebview) { // IOS
    if (window.entryUrl == '' || window.entryUrl == undefined) {
      var url = baseLocation  +
        to.fullPath
      window.entryUrl = url
      console.log('IOS', window.entryUrl)
    } else {
      console.log('IOS2', window.entryUrl)
    }
  } else { // 安卓
    window.entryUrl = baseLocation +
      to.fullPath
  }

})

意思是定义一个全局变量，这个变量等于第一次进入的地址

在需要授权的页面里：

    async wxInit() {
      console.log("授权地址", window.entryUrl);
      //这里单独提出来
      let data = await http.go(
        api.getSignature,
        { url: window.entryUrl },
        true
      );
      if (data.no == 1) {
        await wx.config({
          debug: false,
          appId: data.obj.appid,
          timestamp: data.obj.timestamp,
          nonceStr: data.obj.noncestr,
          signature: data.obj.signature,
          jsApiList: ["scanQRCode"]
        });
      } else {
        this.$toast("请刷新页面再试");
      }
    },

后端签名的地址使用这个全局变量即可

转载于:https://www.cnblogs.com/6324/p/10478618.html