Wie kann ich ein Cookie in Reaktion setzen?

76

Ursprünglich verwende ich den folgenden Ajax, um Cookies zu setzen.

function setCookieAjax(){
  $.ajax({
    url: `${Web_Servlet}/setCookie`,
    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
    headers: { 'Access-Control-Allow-Origin': '*',
               'username': getCookie("username"),
              'session': getCookie("session")
    },
    type: 'GET',
    success: function(response){
      setCookie("username", response.name, 30);
      setCookie("session", response.session, 30);}
  })
}

function setCookie(cname, cvalue, minutes) {
    var d = new Date();
    d.setTime(d.getTime() + (minutes*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

export const getUserName = (component) => {
    setCookieAjax()
 $.ajax({
    url: `${Web_Servlet}/displayHeaderUserName`,
    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
    headers: { 'Access-Control-Allow-Origin': '*',
                'username': getCookie("username"),
                'session': getCookie("session")
            },
    type: 'GET',
    success: function(response){
        component.setState({
        usernameDisplay: response.message
        })
   }.bind(component)
 })
}

Jetzt möchte ich das Cookie mithilfe der Funktion zum Hinzufügen von Cookies des Servlets setzen. Aber ich weiß nicht, wie ich meinen Zweck erreichen soll.

Cookie loginCookie = new Cookie("user",user);  //setting cookie to expiry in 30 mins
        loginCookie.setMaxAge(30*60);
        loginCookie.setDomain("localhost:4480");
        loginCookie.setPath("/");

response.addCookie(loginCookie);

Was sollte ich auf die Reaktionsseite schreiben, um die Sitzungszeit des Cookies zu erhalten, um das Cookie-Zeitlimit zu verlängern?

OPfan
quelle

Antworten:

148

Es scheint, dass die zuvor im react-cookienpm-Paket vorhandene Funktionalität in verschoben wurde universal-cookie. Das relevante Beispiel aus dem Universal-Cookie-Repository lautet nun:

import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('myCat', 'Pacman', { path: '/' });
console.log(cookies.get('myCat')); // Pacman
gesprenkelte Karpfen
quelle
Hallo, ich habe dieses Paket installiert, erhalte jedoch beim Importieren einen Fehler. Fehler: ENOENT: Keine solche Datei oder kein solches Verzeichnis. Öffnen Sie 'D: \ XXX-Projekt \ Benutzer 22 Okt \ Anwendung1 \ Knotenmodule \ Universal-Cookie \ Knotenmodule \ Cookie \ Index. js '
KS
@KS npm install universal-cookie? Überprüfen Sie den Pfad in der Nachricht. Wenn es nicht da ist, haben Sie es nicht installiert.
C4d
Dieses Paket hat einige Probleme. Sie haben Zugriff auf Cookies, solange Sie die Seite nicht neu geladen haben. Nach dem Nachladen erhalten Sie undefined(Kann wegen der Linie sein var cookies = new Cookies(), ich weiß nicht). so ermüdend. Ich habe einen Tag mit diesem Problem verbracht, aber noch keine Antwort. Ich werde mein Cookie-Paket ändern.
Mahdieh Shavandi
16

Ich setze Cookies in React mithilfe der React-Cookie-Bibliothek. Sie enthält Optionen, mit denen Sie Optionen zum Festlegen der Ablaufzeit übergeben können.

Schau es dir hier an

Ein Beispiel für die Verwendung für Ihren Fall:

import cookie from "react-cookie";

setCookie() => {
  let d = new Date();
  d.setTime(d.getTime() + (minutes*60*1000));

  cookie.set("onboarded", true, {path: "/", expires: d});
};
bdougie
quelle
3
Es scheint, dass das React-Cookie-Paket die in dieser Lösung verwendete API aktualisiert (defekt) hat. +1 für den Link, und ich habe die aktualisierte Antwort unten gepostet.
Speckledcarp
9

Eine sehr einfache Lösung ist die Verwendung des sfcookies-Pakets. Sie müssen es nur mit npm installieren, zum Beispiel: npm install sfcookies --save

Dann importieren Sie die Datei:

import { bake_cookie, read_cookie, delete_cookie } from 'sfcookies';

Erstellen Sie einen Cookie-Schlüssel:

const cookie_key = 'namedOFCookie';

In Ihrer Übermittlungsfunktion erstellen Sie das Cookie, indem Sie die Daten wie folgt speichern:

bake_cookie(cookie_key, 'test');

um es zu löschen, mach es einfach

delete_cookie(cookie_key);

und um es zu lesen:

read_cookie(cookie_key)

Einfach und leicht zu bedienen.

sergioviniciuss
quelle
2
Ich habe versucht react-cookie, universal-cookieund nach einem Tag kämpft mit undefinedder Folge cookies.get("cookie_name")dieser Pakete, kam ich schließlich über diese Lösung und das Paket sfcookiesfür mich gearbeitet. Ich danke dir sehr! Du hast mich gerettet!
Mahdieh Shavandi
5

Standardmäßig , wenn Sie holen Ihre URL , Reaktion nativen setzt das Cookie.

Um Cookies anzuzeigen und sicherzustellen, dass Sie das Paket https://www.npmjs.com/package/react-native-cookie verwenden können . Ich war sehr zufrieden damit.

Natürlich macht Fetch das, wenn es das tut

credentials: "include",// or "some-origin"

Nun, aber wie man es benutzt

--- nach der Installation dieses Pakets ----

um Cookies zu bekommen:

import Cookie from 'react-native-cookie';

Cookie.get('url').then((cookie) => {
   console.log(cookie);
});

Cookies setzen:

Cookie.set('url', 'name of cookies', 'value  of cookies');

nur das

Aber wenn Sie ein paar wollen, können Sie es tun

1- wie verschachtelt:

Cookie.set('url', 'name of cookies 1', 'value  of cookies 1')
        .then(() => {
            Cookie.set('url', 'name of cookies 2', 'value  of cookies 2')
            .then(() => {
                ...
            })
        })

2- wieder zusammen

Cookie.set('url', 'name of cookies 1', 'value  of cookies 1');
Cookie.set('url', 'name of cookies 2', 'value  of cookies 2');
Cookie.set('url', 'name of cookies 3', 'value  of cookies 3');
....

Wenn Sie nun sicherstellen möchten, dass die Cookies eingerichtet sind, können Sie sie erneut abrufen, um dies sicherzustellen.

Cookie.get('url').then((cookie) => {
  console.log(cookie);
});
Mahdi Bashirpour
quelle
4

Kleines Update. Für React-Cookies steht ein Hook zur Verfügung

1) Installieren Sie zunächst die Abhängigkeit (nur für einen Hinweis)

yarn add react-cookie

oder

npm install react-cookie

2) Mein Anwendungsbeispiel:

// SignInComponent.js
import { useCookies } from 'react-cookie'

const SignInComponent = () => {

// ...

const [cookies, setCookie] = useCookies(['access_token', 'refresh_token'])

async function onSubmit(values) {
    const response = await getOauthResponse(values);

    let expires = new Date()
    expires.setTime(expires.getTime() + (response.data.expires_in * 1000))
    setCookie('access_token', response.data.access_token, { path: '/',  expires})
    setCookie('refresh_token', response.data.refresh_token, {path: '/', expires})

    // ...
}

// next goes my sign-in form

}

Hoffe es ist hilfreich.

Vorschläge zur Verbesserung des obigen Beispiels sind sehr willkommen!

Oleksii Zymovets
quelle
3

Sie können die Standardmethode zum Festlegen von Javascript-Cookies verwenden. das funktioniert perfekt.

createCookieInHour: (cookieName, cookieValue, hourToExpire) => {
    let date = new Date();
    date.setTime(date.getTime()+(hourToExpire*60*60*1000));
    document.cookie = cookieName + " = " + cookieValue + "; expires = " +date.toGMTString();
},

Rufen Sie die Java-Skriptfunktion in der Reaktionsmethode wie folgt auf:

createCookieInHour('cookieName', 'cookieValue', 5);

und Sie können die folgende Methode verwenden, um Cookies anzuzeigen.

let cookie = document.cookie.split(';');
console.log('cookie : ', cookie);

Weitere Informationen finden Sie im folgenden Dokument - URL

Thilina Sampath
quelle