Termin pliki cookie HTTP został ukuty z plików cookie z wróżbą. Ciasteczka z wróżbą sięgają XIX wieku w Kioto w Japonii. Wewnątrz tych plików cookie osadzone są specjalne wiadomości. Lou Montulli , twórca stron internetowych, wykorzystał ten pomysł, a także metodę używaną przez systemy Unix do wysyłania małych plików danych z jednego programu do drugiego bez zmian, aby wymyślić pliki cookie HTTP.

W tym samouczku przyjrzymy się plikom cookie HTTP za pomocą JavaScript oraz temu, jak prowadziłem grę w myszy, próbując ustawić i odzyskać pliki cookie.

Oświadczenie o problemie

Mam żądanie get z funkcją wywołania zwrotnego zawierającą plik accessToken. Następnie chciałbym pobrać informacje o użytkowniku, używając accessTokenwygenerowanego, co zostanie wykonane za pomocą żądania pobrania.

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

Rozwiązanie Waniliowe Ciasteczka

Pierwszym rozwiązaniem, które przyszło mi do głowy, jest przechowywanie wartości jako pliku cookie. W ten sposób musimy po prostu pobrać wartość pliku cookie, gdy tylko jej potrzebujemy.

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

let userinfo = document.cookie

Stało się to poważnym problemem, ponieważ muszę pobrać zarejestrowany plik cookie z innej strony. Funkcja przeładowania okna mogłaby to naprawić, gdybym budował z Vanilla JavaScript.

window.location.reload()

Rozwiązanie Reaguj na pliki cookie

Szukając rozwiązania, znalazłem idealną bibliotekę plików cookie React . Zgodnie z instrukcją doszedłem do tego:

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

Reaguj na ratunek

Implementacja procesu projektowego polega na pobraniu informacji o użytkowniku, zapisaniu ich i przejściu do nowej strony z zapisanymi informacjami. Dzięki React useNavigate, możemy przechowywać informacje o użytkowniku w stanie podczas nawigacji.

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

Pomyślnie zakończyłem pościg w kotka i myszkę za pomocą stanu React. W tym artykule zbadaliśmy, jak przekazywać informacje między komponentami Reacta. Najpierw zbadaliśmy waniliowe pliki cookie JavaScript. Następnie wykorzystaliśmy bibliotekę ciasteczek React, a na końcu stan React.