微信浏览器下 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);
			});
        });
}