如何从React Native WebView中获取用户授权、注册后的会话信息

完全可以覆盖用户授权、注册流程完成后的会话读取需求，无需仅依赖初始加载完成的单次注入逻辑，具体可根据场景选择以下实现方法：

方法1：基于导航状态回调的触发式读取 #

用户完成授权、注册流程后，站点通常会发生路由跳转（含SPA的hash路由变更），这一动作会触发WebView的onNavigationStateChange回调，可借这个时机补充执行会话读取逻辑，避免仅靠初始加载的单次触发漏过后续流程写入的session。

// 替换原有空的导航状态处理逻辑
onNavigationStateChange = (navState) => {
  // 标记位避免和初始onLoadEnd的逻辑重复执行
  if (this.isFirstNav) {
    this.isFirstNav = false;
    return;
  }
  // 延迟等待异步的localStorage写入完成后再读取
  setTimeout(() => {
    this.webref.injectJavaScript(
      `window.ReactNativeWebView.postMessage(window.localStorage.getItem('session') || 'NO_SESSION')`,
    );
  }, 100);
}

• 适用场景：授权、注册流程完成后必然发生页面跳转的业务
• 注意事项：必须加短延迟，因为路由跳转和localStorage写入是异步执行的，立刻读取可能获取不到刚写入的会话值

方法2：注入全局存储监听的实时捕获逻辑 #

这种方法可靠性更高：在WebView初次加载完成时，直接注入一段全局监听脚本，只要页面端向存储中写入了指定的session字段，就立刻主动向RN侧发送消息，完全不需要依赖页面跳转的触发时机。
直接替换原有onLoadEnd里的注入逻辑即可：

onLoadEnd = () => {
  this.webref.injectJavaScript(`
    // 初次加载先同步一次已存在的session，兼容用户已登录的场景
    window.ReactNativeWebView.postMessage(window.localStorage.getItem('session') || 'NO_SESSION');

    // 重写localStorage的setItem方法，拦截session的写入动作
    const originSetItem = window.localStorage.setItem.bind(window.localStorage);
    window.localStorage.setItem = function(key, val) {
      originSetItem(key, val);
      // 检测到session写入时，实时同步给RN侧
      if (key === 'session') {
        window.ReactNativeWebView.postMessage(val);
      }
    }

    // 兼容多标签页、跨页面的存储变更监听
    window.addEventListener('storage', (e) => {
      if (e.key === 'session') {
        window.ReactNativeWebView.postMessage(e.newValue || 'NO_SESSION');
      }
    });
  `);
}

• 核心优势：不管用户是在当前页通过弹窗完成授权、还是静默写入session无页面跳转、还是SPA应用无硬加载的路由切换，只要session值写入存储，RN侧就能立刻收到对应消息，覆盖场景比导航触发的方式更广
• 灵活调整点：如果目标站点的会话存在sessionStorage而非localStorage，只要把脚本里的存储对象对应替换为window.sessionStorage即可

实战踩坑提醒 #

• 给onMessage的消息处理加简单防抖，避免页面短时间内多次写入session导致回调频繁触发
• 注入的脚本不要留未处理的语法异常，否则会导致目标页面的JS执行被阻断
• 跨域加载的同窗口页面，这套监听逻辑依然生效，不受跨域访问存储的权限限制

内容的提问来源于stack exchange，提问作者Ренат Клинджев