React Native应用与WebView组件的用户会话共享方案问询

一、为什么直接传Authorization Header没用？ #

WebView的source配置里的自定义Header只对第一次加载的请求生效，后续页面跳转、资源加载都不会自动带这些Header。而且多数网页端是靠Cookie维护会话的，光传Header满足不了需求。

二、可行的同步方案 #

1. 登录后把Token同步成WebView能识别的Cookie #

用React Native的Cookie管理库（比如@react-native-cookies/cookies），把登录拿到的Access Token设置成网页端用的会话Cookie：

import CookieManager from '@react-native-cookies/cookies';

// 登录成功拿到token后执行
const syncWebViewSession = async (token) => {
  await CookieManager.set({
    name: 'access_token', // 换成网页端实际用的Cookie键名
    value: token,
    domain: '你的网页域名.com', // 必须和网页域名完全匹配
    path: '/',
    secure: true, // 生产环境开这个，http网站设为false
    httpOnly: false, // 网页端JS要读的话设false，不需要就设true
  });
};

这样WebView加载网页时会自动带这个Cookie，网页端就能识别用户已登录。

2. 配置WebView确保Cookie生效 #

给WebView加这些配置，保证Cookie能正常工作：

import { WebView } from 'react-native-webview';
import { useRef } from 'react';

const MyWebView = ({ token }) => {
  const webViewRef = useRef(null);

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: 'https://你的网页域名.com' }}
      sharedCookiesEnabled={true} // iOS必须开这个，Android默认支持
      thirdPartyCookiesEnabled={true} // 网页有第三方资源的话开这个
      // 可选：给网页端注入Token，触发网页的登录逻辑
      injectedJavaScript={`
        window.localStorage.setItem('access_token', '${token}');
        window.postMessage({ type: 'APP_LOGIN', token: '${token}' }, '*');
      `}
      // 监听网页端的消息，比如退出请求
      onMessage={(event) => {
        const data = JSON.parse(event.nativeEvent.data);
        if (data.type === 'WEB_LOGOUT') {
          // 执行App端退出逻辑：清Token、删Cookie
          CookieManager.clearAll();
          // 跳回登录页等操作
        }
      }}
    />
  );
};

3. 退出时同步清除两边会话 #

App端退出时要做三件事：

• 清除App本地存的Token
• 调用CookieManager.clearAll()或者删除指定域名的Cookie
• 如果WebView还在运行，注入JS触发网页端退出：

webViewRef.current.injectJavaScript(`
  window.localStorage.removeItem('access_token');
  window.location.href = '/login'; // 跳网页登录页
  window.postMessage({ type: 'LOGOUT_SUCCESS' }, '*');
`);

三、参考文档片段翻译 #

处理自定义Header、会话和Cookie

注意：WebView的初始请求可以携带自定义Header，但后续导航（比如点击链接）不会自动携带这些Header。如果需要所有请求都带自定义Header，你需要用onShouldStartLoadWithRequest拦截请求，重新发送带Header的请求，或者用Cookie维护会话状态。

关于Cookie，iOS和Android处理有差异：

• iOS：需要启用sharedCookiesEnabled属性，WebView才会共享App的Cookie存储。
• Android：默认共享系统Cookie存储，如需精细控制可使用CookieManager API。

如果要在WebView和原生App间同步会话，推荐用Cookie传递认证信息，而不是仅依赖自定义Header——因为Cookie会自动在所有请求中携带，包括页面跳转和资源请求。

内容的提问来源于stack exchange，提问作者Karel Suchomel