Cómo obtener la cookie en React

Cómo obtener la cookie en React

En este tutorial, vamos a aprender cómo obtener una cookie de navegador en React usando el paquete react-cookie.

Índice
  1. Instalación del paquete React-Cookie
  2. Obtener cookies con ganchos React

El paquete react-cookie nos ayuda a obtener y configurar cookies desde el navegador.

Vamos a instalarlo ejecutando el siguiente comando.

Primero, importa el CookiesProvider componente del paquete react-cookie y envuelva su componente de aplicación raíz con él.

índice.js

import React from "react";
import ReactDOM from "react-dom";
import { CookiesProvider } from "react-cookie";import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <CookiesProvider>    <App />  </CookiesProvider>,  rootElement
);

Ahora dentro de su componente React puede acceder a la cookie usando un useCookies() colgar.

Aplicación.js

import React from "react";
import { useCookies } from "react-cookie";
export default function App() {
  const [cookies, setCookie] = useCookies();
  return (
    <div className="App">
      <h1>React cookies</h1>
      {cookies.user && <p>{cookies.user}</p>}    </div>
  );
}

EL cookies el objeto contiene todas las cookies que ha creado en su aplicación.

En los componentes basados ​​en clases, puede obtener la cookie mediante un withCookies() componente de orden superior.

Aplicación.js

import React, { Component } from "react";
import { withCookies } from "react-cookie";
class App extends Component {

  state = {  
    user: this.props.cookies.get("user") || ""  };

  render() {
    const { user } = this.state;    return (
      <div className="App">
        {user && <p>{user}</p>}      </div>
    );
  }
}

export default withCookies(App);

Estos son algunos casos en los que no puede obtener una cookie en React:

  • Si no establece una ruta de cookies como / entonces no puede acceder a una cookie desde todas las páginas.

  • Si defines un httpOnly cookie a la respuesta, no puede acceder a ella en la aplicación de reacción porque el navegador incrusta la cookie directamente en un encabezado HTTP.

Si quieres conocer otros artículos parecidos a Cómo obtener la cookie en React puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas