El término cookies HTTP se acuñó a partir de las galletas de la fortuna. Las galletas de la fortuna se remontan al siglo XIX en Kioto, Japón. Dentro de estas cookies hay mensajes especiales incrustados. Lou Montulli , un desarrollador web, utilizó esta idea, así como el método utilizado por los sistemas Unix para enviar pequeños archivos de datos de un programa a otro sin cambios, para inventar las cookies HTTP.

En este tutorial, exploraremos las cookies HTTP usando JavaScript y cómo ejecuté un juego de ratones, tratando de configurar y recuperar cookies.

Planteamiento del problema

Tengo una solicitud de obtención con una función de devolución de llamada que contiene un archivo accessToken. A continuación, me gustaría recuperar la información del usuario utilizando la accessTokengenerada, lo que se hará con una solicitud de recuperación.

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();

Solución Galletas De Vainilla

La primera solución que se me ocurrió es almacenar el valor como una cookie. De esta forma, solo tenemos que recuperar el valor de la cookie cada vez que lo necesitemos.

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

let userinfo = document.cookie

Esto se convirtió en un problema importante ya que necesito recuperar la cookie registrada desde una página diferente. La función de recarga de la ventana podría haber solucionado esto si estuviera construyendo con JavaScript estándar.

window.location.reload()

Solución Reaccionar Cookies

En mi búsqueda para encontrar una solución, encontré la biblioteca de cookies React perfecta . Siguiendo las instrucciones, llegué a esto:

(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>
  );
}

Estado de reacción al rescate

La implementación del flujo de diseño implica recuperar la información del usuario, almacenarla y navegar a una nueva página con la información guardada. Con React useNavigate, podemos almacenar la información del usuario en estado mientras navega.

.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;
}

Terminé con éxito la persecución del gato y el ratón usando el estado React. En este artículo, exploramos cómo pasar información a través de los componentes de React. Primero, exploramos las cookies de JavaScript estándar. Luego, usamos la biblioteca de cookies de React y finalmente el estado de React.