如何在 react-native 中获取在 webview 中设置的 cookie？

Question

我正在尝试检索用户输入的邮政编码，该邮政编码已添加到网络视图的 cookie 中。我如何得到它？我试过 react-native-cookies 得到一个空对象。

import CookieManager from 'react-native-cookies';

componentWillMount() {
    CookieManager.get('https://www.example.com')
    .then((res) => {
      console.log('CookieManager.get from webkit-view =>', res);
    });
  }
}

<WebView
  style={styles.webview}
  source={{ uri: 'https://www.example.com' }}
  injectedJavaScript={INJECTED_JAVASCRIPT}
  mixedContentMode="compatibility"
  javaScriptEnabled
  domStorageEnabled
  thirdPartyCookiesEnabled
  sharedCookiesEnabled
  originWhitelist={['*']}
  useWebKit
/>

我正在 iOS 模拟器中试用。 Android 效果很好。我看到 https://github.com/react-native-community/react-native-webview/pull/175 已合并，但无法弄清楚如何使用它来获取用户设置的 cookie。

Answer 1

您可以在不使用任何本机模块的情况下尝试以下技巧。只需阅读代码或 URL.

// @flow

import React, { Component } from 'react';
import {
  WebView,
} from 'react-native';

class LoginScreen extends Component {
  state = {
    cookies    : {},
    webViewUrl : ''
  }

  onNavigationStateChange = (webViewState: { url: string }) => {
    const { url } = webViewState;

    // when WebView.onMessage called, there is not-http(s) url
    if(url.includes('http')) {
      this.setState({ webViewUrl: url })
    }
  }

  _checkNeededCookies = () => {
    const { cookies, webViewUrl } = this.state;

    if (webViewUrl === 'SUCCESS_URL') {
      if (cookies['cookie-name-for-jwt']) {
        alert(cookies['cookie-name-for-jwt']);
        // do your magic...
      }
    }
  }

  _onMessage = (event) => {
    const { data } = event.nativeEvent;
    const cookies  = data.split(';'); // `csrftoken=...; rur=...; mid=...; somethingelse=...`

    cookies.forEach((cookie) => {
      const c = cookie.trim().split('=');

      const new_cookies = this.state.cookies;
      new_cookies[c[0]] = c[1];

      this.setState({ cookies: new_cookies });
    });

    this._checkNeededCookies();
  }

  render() {
    const jsCode = "window.postMessage(document.cookie)"
    // let jsCode = "window.postMessage(document.cookie= 'login=; expires=Bla bla bla')"; // if you need to write some cookies, not sure if it goes to shared cookies, most probably no :)

    return (
      <WebView
        source={{ uri: 'AUTH_URL' }}
        onNavigationStateChange={this.onNavigationStateChange}
        onMessage={this._onMessage}
        injectedJavaScript={jsCode}
        style={{ flex: 1 }}
      />
    );
  }
}

export default LoginScreen;

https://gist.github.com/kanzitelli/e5d198e96f81b7a8263745043766127c

希望这对你有用。

如何在 react-native 中获取在 webview 中设置的 cookie？

How can get cookie which is set in webview in react-native?

react-native

react-native-ios

react-native-webview

react-native-cookies