iOS端浏览器第三方APP认证后页面跳转失效问题求助

问题场景 #

用户登录网站需通过第三方APP完成认证，流程如下：

• 用户填写表单并提交
• 发起第三方认证流程，调用带长超时的REST API等待第三方返回认证状态
• 第三方APP启动，用户在APP内完成认证操作
• 我方收到认证成功的API响应后，执行跳转至首页的逻辑（此时用户可能尚未从第三方APP返回浏览器）
• 用户返回浏览器后，仍停留在登录表单页面，跳转未生效

该问题仅出现在iOS设备的Safari、Chrome浏览器中，Android端跳转功能正常。

代码示例 #

const initAuthRequest = ...;
const getAuthStatusRequest = ...;
...
const submitForm = () => {
  post(initAuthRequest)
    .then((initAuthResponse) => {
        if (initAuthResponse !== 'OK') throw 'FAILED';

        get(getAuthStatusRequest)
            .then((authStatusResponse) => {
                if (authStatusResponse === 'OK') window.location.href = 'http://www.app.com/home';
            });
    })
};

补充更新 #

原本getAuthStatusRequest是GET请求，被iOS机制重复调用；改为POST后重复调用问题解决，但用户返回浏览器后，请求仍显示pending状态，尽管控制台已记录响应内容。（注：无Mac设备，无法查看网络日志）

解决方案 #

1. 替换长连接为短轮询 #

iOS浏览器在页面后台时会限制长连接的处理，甚至暂停请求。将长超时等待API改为短轮询，定期发起POST请求查询认证状态：

const submitForm = () => {
  post(initAuthRequest)
    .then((initAuthResponse) => {
        if (initAuthResponse !== 'OK') throw 'FAILED';
        
        // 每2秒轮询一次认证状态
        const pollInterval = setInterval(() => {
          post(getAuthStatusRequest)
            .then((authStatusResponse) => {
              if (authStatusResponse === 'OK') {
                clearInterval(pollInterval);
                window.location.replace('http://www.app.com/home');
              }
            })
            .catch(err => {
              clearInterval(pollInterval);
              // 处理查询失败的逻辑，比如提示用户重新认证
            });
        }, 2000);
    })
    .catch(err => {
      // 处理初始化认证失败的逻辑
    });
};

2. 监听页面可见性触发跳转 #

当用户从第三方APP返回浏览器时，页面会从后台切换到前台，通过visibilitychange事件监听状态变化，此时主动检查认证状态并执行跳转：

let isAuthSuccess = false;

const submitForm = () => {
  post(initAuthRequest)
    .then((initAuthResponse) => {
        if (initAuthResponse !== 'OK') throw 'FAILED';

        post(getAuthStatusRequest)
            .then((authStatusResponse) => {
                if (authStatusResponse === 'OK') {
                  isAuthSuccess = true;
                  window.location.replace('http://www.app.com/home');
                }
            });
    });
};

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
  // 页面变为可见且已认证成功时，执行跳转
  if (!document.hidden && isAuthSuccess) {
    window.location.replace('http://www.app.com/home');
  }
});

3. 调整跳转方式 #

iOS部分浏览器对后台页面的location.href跳转支持不佳，改用location.replace强制替换当前页面，避免浏览器缓存历史记录导致的跳转失效：

// 替换原跳转代码
if (authStatusResponse === 'OK') window.location.replace('http://www.app.com/home');

4. 改用第三方APP回调跳转 #

和第三方服务商协商，在用户完成认证后，直接由第三方APP打开我方首页链接（携带认证凭证），跳过我方后台等待逻辑。这种方式能彻底规避iOS后台请求限制，但需要第三方支持回调配置。

内容的提问来源于stack exchange，提问作者Simas.B