Термин «куки-файлы HTTP» был придуман от файлов cookie с предсказаниями. Печенье с предсказаниями появилось еще в 19 веке в Киото, Япония. В эти файлы cookie встроены специальные сообщения. Лу Монтулли , веб-разработчик, использовал эту идею, а также метод, используемый системами Unix для отправки небольшого файла данных из одной программы в другую без изменений, чтобы изобрести файлы cookie HTTP.

В этом руководстве мы рассмотрим файлы cookie HTTP с использованием JavaScript и то, как я запускал игру с мышами, пытаясь установить и получить файлы cookie.

Постановка задачи

У меня есть запрос на получение с функцией обратного вызова, содержащей файл accessToken. Затем я хотел бы получить информацию о пользователе, используя accessTokenсгенерированный запрос на выборку.

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

Раствор ванильного печенья

Первое решение, которое пришло мне в голову, — сохранить значение в виде файла cookie. Таким образом, нам просто нужно получить значение cookie всякий раз, когда оно нам понадобится.

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

let userinfo = document.cookie

Это стало серьезной проблемой, так как мне нужно получить зарегистрированный файл cookie с другой страницы. Функция перезагрузки окна могла бы исправить это, если бы я строил с помощью ванильного JavaScript.

window.location.reload()

Решение React Cookies

В поисках решения я нашел идеальную библиотеку cookie React . Следуя инструкции, я пришел к следующему:

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

Реагируйте на помощь

Реализация потока проектирования включает в себя извлечение информации о пользователе, ее сохранение и переход на новую страницу с сохраненной информацией. С помощью React useNavigateмы можем хранить информацию о пользователе в состоянии во время навигации.

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

Я успешно закончил погоню за кошками и мышами, используя состояние React. В этой статье мы рассмотрели, как передавать информацию между компонентами React. Во-первых, мы исследовали ванильные файлы cookie JavaScript. Затем мы использовали библиотеку cookie React и, наконец, состояние React.