Ako pokrenete brzo Google pretraživanje trajnog prijavljenog korisnika u Reactu (ili zadržavanja korisnika prijavljenog u Reactu), nećete dobiti puno jednostavnih rezultata. Ne postoje zapravo jednostavni primjeri kako to postići. Tako sam zaključio da moram napisati taj jednostavan vodič.
Možda ste to pretražili i vidjeli kako se baca riječ localStorage . Da, koristit ćemo localStorage, ali pokazat ću vam točno kako se to radi.
Neke bilješke o localStorage.
- localStorage je baza podataka preglednika. Podaci se pohranjuju u vašem pregledniku u memoriji računala.
- localStorage specifičan je za podrijetlo. Drugim riječima, localStorage za jednu web stranicu ne može pristupiti druga.
Početno postavljanje
Započnimo. Na Heroku sam rasporedio jednostavan ekspresni poslužitelj za upotrebu u testiranju ove aplikacije.
- Stvorite novu React aplikaciju i krenite u
komponentu. - Instalirajte axios pomoću
npm install axiosi uvezite ga unutra - Zatim stvorite jednostavan obrazac za prijavu koji prihvaća korisničko ime i lozinku.
import React, { useState } from "react"; import axios from "axios"; const App = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [user, setUser] = useState() const handleSubmit = async e => { }; // if there's a user show the message below if (user) { return {user.name} is loggged in ; } // if there's no user, show the login form return ( Username: setUsername(target.value)} /> password: setPassword(target.value)} /> Login ); }; export default App; Kao što vidite, definirali smo asinkronu funkciju handleSubmit za obradu zahtjeva za prijavu. Također smo definirali uvjet koji prikazuje korisničko ime. Poruka je prijavljena ako imamo korisnika i obrazac za prijavu ako nemamo korisnika.
Dalje, dovršimo funkciju. Ova će funkcija raditi u sljedećim koracima:
- Pošaljite podatke za prijavu na poslužitelj.
- Ako je zahtjev uspješan (async-await), pohranite korisničke podatke u localStorage i postavite stanje korisnika.
Rukovati događajem prijave
Definirajmo obrađivač događaja handleSubmit .
const handleSubmit = async e => { e.preventDefault(); const user = { username, password }; // send the username and password to the server const response = await axios.post( "//blogservice.herokuapp.com/api/login", user ); // set the state of the user setUser(response.data) // store the user in localStorage localStorage.setItem('user', response.data) console.log(response.data) }; Napomena: Koristite tryCatch blok za rukovanje pogreškama u funkcijama asinkronizacije.
Sada kada je naša funkcija gotova, možete pokrenuti npm start da biste testirali svoju aplikaciju. Prijavite se korisničkim imenom : user2, lozinkom : lozinkom.
Kao odgovor trebali biste dobiti sljedeće. UserId , znak i ime
Provjerite je li se korisnik prethodno prijavio
Dalje, želimo način da provjerimo postoji li korisnik prijavljen svaki put kada se aplikacija učita. Za to koristimo useEffect kuku.
useEffect(() => { const loggedInUser = localStorage.getItem("user"); if (loggedInUser) { const foundUser = JSON.parse(loggedInUser); setUser(foundUser); } }, []); Ne zaboravite upotrijebiti prazan niz ovisnosti u useEffect kuki tako da provjerava postoji li prijavljeni korisnik pri prvom učitavanju aplikacije.
Sada bi naša aplikacija trebala raditi savršeno. Donju stranicu dobivamo nakon što se korisnik prvi put prijavio i njihovi se podaci pohrane. Ako osvježite stranicu, vidjet ćete da naš korisnik ostaje prijavljen, a prijavljena stranica nastavlja se prikazivati.
Kao bonus savjet, evo kako implementirati odjavu.
Implementacija funkcionalnosti odjave
Za odjavu jednostavno ispraznimo stanje korisnika i uklonimo korisnika iz localStorage.
Provedimo to.
Prvo stvorimo gumb za odjavu
logout Zatim kreiramo funkciju odjave.
const handleLogout = () => { setUser({}); setUsername(""); setPassword(""); localStorage.clear(); }; I to je to, gotovi smo.
Evo poveznice na cjeloviti sadržaj GitHub-a. Možete me pratiti tamo za dodatna ažuriranja.