web-dev-qa-db-ja.com

反応アプリでブラウザーのCookieにアクセスする方法

この質問は少し人気がありますが、私はそのような運がありません。私は主にバックエンドの人ですので、私は私が進むにつれて学んでいます。

_connect.sid_という名前のCookieと_12345_の値があります。これは私のchrome dev toolsにあります。

私の反応アプリでは、コンソールが_document.cookie_およびlocalStorage.getItem('connect.sid')をログに記録しました。ヌル値を取得しています。 _12345_の値を取得する方法？

Passportjs 、 passport-github2戦略を使用 、このCookieを作成しました。 APIと通信できるようにアクセスする必要があります。

ありがとう

reactjscookies
4
Sylar

_react-cookie_を使用することが、Cookie値を取得する最も簡単な方法です。 _npm install react-cookie_を実行すると、v2がインストールされます。クライアントでのみシンプルなAPIを使用する場合は、v1を使用することをお勧めします。 _npm install [email protected]_を実行し、_import cookie from 'react-cookie'_をファイルに追加し、cookie.load('connect.sid')を使用してCookie値を取得します。詳細については、v1の [〜＃〜] readme [〜＃〜] を確認してください。

それでもcookie値を取得できない場合は、確認してください：

  1. すべてのページでCookieにアクセスできるようにする場合、Cookieは_/_のような正しいパスに設定されます。
  2. cookieは httpOnly cookie ではなく、JavaScriptを介してHttpOnly Cookieにアクセスできません。
11
tony.hokan

私は答えがあなたが望むものではないことを知っていますが、サーバーサイドで誰かを承認したいだけなら簡単な解決策があります。追加するだけ

資格情報： 'same-Origin'

AJAX=リクエストに送信します。これを行った場合、cookieはconnect.sidとともにサーバーに送信され、サーバーが認証を処理します。

3
NotGapsong

React-cookie v2を使用した完全な例。

ルートコンポーネントと、withCookies（..）のCookieにアクセスする個々のコンポーネントをラップする必要があります。クッキーは小道具の一部になります。

client.js：

import {CookiesProvider} from "react-cookie";

<CookiesProvider>
  <App />
</CookiesProvider>

App.js：

import React from "react";
import {withCookies} from 'react-cookie';

class App extends React.Component {
  render() {
    const {cookies} = this.props;
    return <p>{cookies.get('mycookie')}</p>
  }
}

export default withCookies(App);
1
Patrik Beck

_npm install react-cookie_から始めて_import { Cookies } from 'react-cookie'_で始め、最後にcookies.get('connect.sid')で始めます。

ルートアプリをCookiesProviderのようにラップすることを忘れないでください。

_  <CookiesProvider>
    <App />
  </CookiesProvider>
_

あなたは例を見つけることができますここ

0
Ze Rubeus