O termo cookies HTTP foi cunhado de biscoitos da sorte. Os biscoitos da sorte remontam ao século 19 em Kyoto, Japão. Dentro desses cookies estão incorporadas mensagens especiais. Lou Montulli, um desenvolvedor da Web, usou essa ideia, bem como o método usado pelos sistemas Unix para enviar pequenos arquivos de dados de um programa para outro sem alterações para inventar os cookies HTTP.

Neste tutorial, exploraremos os cookies HTTP usando JavaScript e como executei um jogo de ratos, tentando definir e recuperar cookies.

Declaração do problema

Eu tenho uma solicitação get com uma função de retorno de chamada contendo um arquivo accessToken. Em seguida, gostaria de recuperar as informações do usuário, usando o accessTokengerado, o que será feito com uma solicitação de busca.

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

Cookies de baunilha de solução

A primeira solução que me veio à mente é armazenar o valor como um cookie. Dessa forma, basta recuperar o valor do cookie sempre que precisarmos.

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

let userinfo = document.cookie

Isso se tornou um grande problema, pois preciso recuperar o cookie registrado de uma página diferente. A função de recarregamento da janela poderia ter corrigido isso se eu estivesse construindo com JavaScript vanilla.

window.location.reload()

Cookies de reação de solução

Em minha busca para encontrar uma solução, encontrei a biblioteca de cookies React perfeita . Seguindo a instrução, cheguei a isso:

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

Reagir ao estado para o resgate

A implementação do fluxo de design envolve recuperar as informações do usuário, armazená-las e navegar para uma nova página com as informações salvas. Com React useNavigate, podemos armazenar as informações do usuário no estado durante a navegação.

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

Terminei com sucesso a perseguição de gato e rato usando o estado React. Neste artigo, exploramos como passar informações entre os componentes do React. Primeiro, exploramos os cookies JavaScript vanilla. Em seguida, usamos a biblioteca de cookies React e, finalmente, o estado React.