微信浏览器下 pushState 的坑
iOS 的微信浏览器有一个巨坑,使用 pushState 改变 url 后,此时 location.href 确实变化了,但是微信浏览器认为地址还是打开页面时的地址,这个可以从 “在 Safari 中打开” 看到。
所以下面的代码就会导致 JSSDK 在 pushState 后验证失败,报错 invalid signature
,原因如上。
import wx from 'weixin-js-sdk';
export function initWX() {
getConfigFromServer(location.href.split('#')[0])
.then((response) => {
wx.config(response);
});
}
// ...监听路由变化
$router.onUpdate(() => {
initWX();
});
解决方法
首先按照正常的地址进行计算签名,如果失败,就按照页面刚进入时的地址来计算。
// 进入应用时先记录进入时的地址
global.originalUrl = location.href.split('#')[0];
// initWX方法添加error事件
export function initWX(url = location.href.split('#')[0]) {
getConfigFromServer(url)
.then((response) => {
wx.config(response});
wx.error(() => {
initWX(global.originalUrl);
});
});
}