Le terme cookies HTTP a été inventé à partir des fortune cookies. Les biscuits de fortune remontent au 19ème siècle à Kyoto au Japon. À l'intérieur de ces cookies sont intégrés des messages spéciaux. Lou Montulli , un développeur Web, a utilisé cette idée ainsi que la méthode utilisée par les systèmes Unix pour envoyer de petits fichiers de données d'un programme à un autre sans changement pour inventer les cookies HTTP.

Dans ce didacticiel, nous allons explorer les cookies HTTP à l'aide de JavaScript et comment j'ai exécuté un jeu de souris, en essayant de définir et de récupérer des cookies.

Énoncé du problème

J'ai une requête get avec une fonction de rappel contenant un fichier accessToken. Ensuite, j'aimerais récupérer les informations de l'utilisateur, en utilisant le accessTokengénéré, ce qui sera fait avec une requête de récupération.

callback: (response) => {
      // run fetch request to get user info
      let value = fetch(url + response.access_token, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
        },
      })
        .then(value => value.json())
        .then(text => console.log(text))
    }

.then(text => return text)

function callme() {
  callback: (response) => {
      ...
    }
}

let userinfo = callme();

Biscuits Solution Vanille

La première solution qui m'est venue à l'esprit est de stocker la valeur sous forme de cookie. De cette façon, nous n'avons qu'à récupérer la valeur du cookie chaque fois que nous en avons besoin.

.then(text => document.cookie = "userinfo=" + JSON.stringify({ username: text.name, userimg: text.picture }))

let userinfo = document.cookie

Cela est devenu un problème majeur car j'ai besoin de récupérer le cookie enregistré à partir d'une autre page. La fonction de rechargement de la fenêtre aurait pu résoudre ce problème si je construisais avec du JavaScript vanille.

window.location.reload()

Cookies de réaction de solution

Dans ma recherche pour trouver une solution, j'ai trouvé la bibliothèque de cookies R eact parfaite . Suite à l'instruction, je suis arrivé à ceci:

(Pageone.jsx)

import React from "react";
import { useCookies } from "react-cookie";

export default function Pageone() {
  const [setCookie] = useCookies(["user"]);

  function myCookie() {
    setCookie("user", "blah", {
      path: "/"
    });
  }
  return (
    <button onClick={myCookie()}>Set Cookie</button>
  );
}
(Pagetwo.jsx)

import React from "react";
import { useCookies } from "react-cookie";

export default function Pagetwo() {
  const [cookies] = useCookies(["user"]);

  return (
    <div className="Pagetwo">
      <h1>React cookies</h1>
       {cookies.user && <p>{cookies.user}</p>}
      <button onClick={myCookie()}>Set Cookie</button>
    </div>
  );
}

Réagissez l'État à la rescousse

La mise en œuvre du flux de conception implique de récupérer les informations utilisateur, de les stocker et de naviguer vers une nouvelle page avec les informations enregistrées. Avec React useNavigate, nous pouvons stocker les informations utilisateur dans l'état pendant la navigation.

.then(text => navigate('/', { state:{username:text.name, userimg:text.picture}}))

import { useLocation } from 'react-router-dom';

const Sidebar = () => {
  const location = useLocation();
  // retrieve userimg
  let userimg = location.state.userimg;
  // retrieve username
  let username = location.state.username;
}

J'ai terminé avec succès la chasse au chat et à la souris en utilisant l'état React. Dans cet article, nous avons exploré comment transmettre des informations entre les composants React. Tout d'abord, nous avons exploré les cookies JavaScript vanille. Ensuite, nous avons utilisé la bibliothèque de cookies React et enfin l'état React.