如何将JWT token从React Native传递到WebView以跳过二次登录验证

方案1：自定义请求头注入（最简单的初始请求鉴权方案） #

• 适用场景：只需要WebView初始加载的Dashboard页面校验身份，后续请求都走Web侧自身逻辑
• 实现方式：直接在WebView的source属性中配置headers，将JWT放在标准Authorization请求头中，Web侧后端直接解析该请求头完成身份校验，直接返回Dashboard页面无需跳登录
• 代码示例：

import WebView from 'react-native-webview';
// 你用来存储JWT的工具，替换成你自己的实现
import { useMMKV } from 'react-native-mmkv';

const DashboardScreen = () => {
  const storage = useMMKV();
  const userJWT = storage.getString('user_token');

  return (
    <WebView
      source={{
        uri: 'https://你的站点地址/dashboard',
        headers: {
          Authorization: `Bearer ${userJWT}`
        }
      }}
    />
  )
}

• 注意：该方案仅对WebView的初始请求生效，同域下的后续跳转大部分场景会自动携带该请求头，跨域场景不会携带。

方案2：postMessage双向通信传递（最灵活的全场景方案） #

• 适用场景：需要WebView生命周期内持续持有JWT，后续页面跳转、接口请求都需要身份校验的场景
• 实现逻辑：RN端在WebView加载完成后，通过postMessage将JWT发送给Web侧，Web侧监听消息事件拿到JWT后，存入localStorage/Cookie，再自行完成跳转/鉴权逻辑
• RN端代码示例：

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

const DashboardScreen = () => {
  const webViewRef = useRef(null);
  const userJWT = '你从本地存储取出的JWT';

  const handleLoadEnd = () => {
    // 向Web侧发送结构化消息
    webViewRef.current.postMessage(JSON.stringify({
      action: 'SET_AUTH_TOKEN',
      token: userJWT
    }))
  }

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: 'https://你的站点地址' }}
      onLoadEnd={handleLoadEnd}
      // iOS开启Cookie共享需要加这个属性
      sharedCookiesEnabled={true}
    />
  )
}

• Web侧配套代码（需要Web端同学配合加到页面公共逻辑中）：

window.addEventListener('message', (event) => {
  // 安全校验：只接受信任域名的消息
  if (event.origin !== 'https://你的站点地址') return;

  const message = JSON.parse(event.data);
  if (message.action === 'SET_AUTH_TOKEN') {
    // 存到localStorage供前端接口请求使用
    localStorage.setItem('jwt_token', message.token);
    // 存到Cookie，后端接口可以自动读取，无需前端额外处理
    document.cookie = `jwt=${message.token}; path=/; max-age=86400; SameSite=Lax`;
    // 如果当前处在登录页，直接跳转到Dashboard，跳过登录流程
    if (window.location.pathname === '/login') {
      window.location.replace('/dashboard');
    }
  }
})

方案3：URL查询参数携带（最快速的临时方案） #

• 适用场景：快速验证，临时使用的场景，不建议生产环境长期使用
• 实现方式：直接把JWT拼到Dashboard页面的URL参数中，Web侧读取URL参数拿到token后存入本地完成鉴权
• 示例：

<WebView
  source={{ uri: `https://你的站点地址/dashboard?token=${encodeURIComponent(userJWT)}` }}
/>

• 注意：该方案会将JWT明文暴露在URL中，容易被系统日志、埋点采集到，存在安全风险，生产环境使用需要做好权限控制和过期处理。

通用注意事项 #

• 不要明文在RN本地存储JWT，建议使用加密存储库比如react-native-keychain、加密版MMKV等，避免设备root/越狱后token泄露
• 如果使用Cookie存储token，需要开启WebView的Cookie共享配置，iOS设置sharedCookiesEnabled={true}，Android需要提前初始化CookieManager
• 所有跨端通信都要做好域名校验，避免恶意页面窃取token

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