web-dev-qa-db-fra.com

Comment accéder à un cookie de navigateur dans une application de réaction

Cette question est un peu populaire mais je n’ai pas cette chance. Je suis surtout une personne d’arrière-plan, donc j’apprends au fur et à mesure.

J'ai un cookie nommé connect.sid et une valeur de 12345. Je le vois dans mes outils de développement chromés.

Dans mon application de réaction, je consignais document.cookie et localStorage.getItem('connect.sid'). J'obtiens des valeurs nulles. Comment obtenir la valeur de 12345? 

Passportjs , utilisant la stratégie passport-github2 , a créé ce cookie. J'ai besoin d'y accéder pour pouvoir parler à mon API.

Merci

reactjscookies
3
Sylar

Utiliser react-cookie peut être le moyen le plus simple d’obtenir une valeur de cookie. Vous pouvez exécuter npm install react-cookie, la v2 sera installée. Si vous souhaitez uniquement utiliser une API simple sur le client, je vous suggère d'utiliser la version 1. Il suffit d’exécuter npm install [email protected], d’ajouter import cookie from 'react-cookie' à votre fichier et d’utiliser cookie.load('connect.sid') pour obtenir la valeur du cookie. Vous pouvez consulter le fichier README de v1 pour plus de détails.

Si vous ne pouvez toujours pas obtenir la valeur du cookie, veuillez confirmer:

  1. le cookie est défini sur le chemin correct, tel que /, si vous souhaitez que votre cookie soit accessible sur toutes les pages.
  2. le cookie n'est pas httpOnly cookie , les cookies HttpOnly ne sont pas accessibles via JavaScript.
11
tony.hokan

Je sais que cette réponse n’est pas exactement ce que vous voulez, mais que si vous souhaitez simplement autoriser une personne sur le serveur, j’ai une solution simple. Il suffit d'ajouter 

pouvoirs: 'origine identique'

à votre demande AJAX. Si vous avez fait cela, le cookie sera envoyé avec votre connect.sid au serveur et le serveur gérera l'authentification pour vous. 

3
NotGapsong

Vous pouvez commencer par npm install react-cookiethen import { Cookies } from 'react-cookie' et enfin cookies.get('connect.sid'):

n'oubliez pas d'envelopper votre application racine dans CookiesProvider quelque chose comme ceci:

  <CookiesProvider>
    <App />
  </CookiesProvider>

Vous pouvez trouver un exemple ici 

0
Ze Rubeus

Exemple complet utilisant la réaction-cookie v2.

Vous devez envelopper votre composant racine ainsi que les composants individuels auxquels vous souhaitez accéder aux cookies dans with Cookies (..). Les cookies font alors partie des accessoires.

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);
0
Patrik Beck