Vue history模式,iOS微信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("请刷新页面再试");
}
}