React Native使用react-native-webview实现自动登录 避免重复校验问题问询

React Native 原生环境与 WebView 内置浏览器环境的存储（Cookie、LocalStorage 等）默认相互隔离，原生端登录后生成的登录凭据默认不会同步到 WebView 环境，因此打开站点时会被判定为未登录状态，触发二次登录。

方案1：开启Cookie共享（适配绝大多数基于Cookie做登录态校验的站点） #

react-native-webview 提供了sharedCookiesEnabled属性，开启后可实现原生端与 WebView 之间的Cookie自动同步，直接修改你的WebView配置即可：

<WebView
  source={{ uri: URL }}
  startInLoadingState={true}
  // 开启Cookie共享，iOS/Android双端生效
  sharedCookiesEnabled={true}
  renderLoading={() => 
    <ActivityIndicator
    color={theme.colors.accent}
    size="large"
    style={styles.activityIndicator} />
  }
/>

补充说明：如果原生端登录请求的域名和WebView加载的站点域名不一致，需要确保Cookie的Domain、Path属性配置可覆盖到WebView加载的站点域名。

方案2：请求头携带登录Token（适配基于Authorization头做身份校验的站点） #

如果你的站点通过请求头中的Authorization字段校验登录态，可直接在WebView的source参数中注入自定义请求头，把原生端存储的Token传入：

// 替换为你原生端登录后存储的实际Token
const userToken = '实际的用户登录Token';

<WebView
  source={{ 
    uri: URL,
    headers: {
      Authorization: `Bearer ${userToken}`
    }
  }}
  startInLoadingState={true}
  sharedCookiesEnabled={true}
  renderLoading={() => 
    <ActivityIndicator
    color={theme.colors.accent}
    size="large"
    style={styles.activityIndicator} />
  }
/>

方案3：注入JS同步登录态（适配基于LocalStorage/SessionStorage存储登录态的站点） #

如果你的站点将登录凭据存在前端本地存储中，可以通过injectedJavaScript属性注入JS代码，在页面加载前把原生端的登录态写入WebView的本地存储：

const userToken = '你原生端存储的登录Token';
// 注入的JS代码，key需要和站点实际使用的存储登录态的key完全一致
const injectJavaScript = `
  window.localStorage.setItem('site_login_token', '${userToken}');
  true; // 必填，避免部分iOS版本出现执行异常
`;

<WebView
  source={{ uri: URL }}
  startInLoadingState={true}
  sharedCookiesEnabled={true}
  javaScriptEnabled={true}
  injectedJavaScript={injectJavaScript}
  // 确保JS在页面文档创建完成后立即执行，无需等待页面资源加载完成
  injectedJavaScriptBeforeContentLoaded={true}
  renderLoading={() => 
    <ActivityIndicator
    color={theme.colors.accent}
    size="large"
    style={styles.activityIndicator} />
  }
/>

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