Hogyan lehet kitartani a bejelentkezett felhasználót a React-ben

Ha egy gyors Google keresést futtat a bejelentkezett felhasználó kitartásának fenntartása érdekében a React-ban (vagy ha a felhasználót a bejelentkezettnek a React-ban tartja), akkor nem kap sok egyértelmű eredményt. Ennek elérésére valójában nincsenek könnyen követhető példák. Ezért úgy döntöttem, hogy meg kell írnom ezt az egyszerű útmutatót.

Lehet, hogy keresést végzett ezen, és látta, hogy a localStorage szót dobták körbe. Igen, a localStorage alkalmazást fogjuk használni, de pontosan megmutatom, hogyan történik.

Néhány megjegyzés a localStorage-ról.

  1. A localStorage a böngésző adatbázisa. Az adatokat a böngésző tárolja a számítógép memóriájában.
  2. A localStorage az eredetre jellemző. Más szavakkal, az egyik webhely localStorage-ját nem érheti el egy másik.

Kezdeti beállítás

Kezdjük el. Egy egyszerű expressz szervert telepítettem a Heroku-ba az alkalmazás teszteléséhez.

  1. Hozzon létre egy új React alkalmazást, és menjen a komponensbe.
  2. Telepítse az axiókat a használatával, npm install axiosés importálja belsejébe
  3. Ezután hozzon létre egy egyszerű bejelentkezési űrlapot, amely elfogadja a felhasználónevet és a jelszót.
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; 

Mint láthatja, meghatároztunk egy aszinkron handleSubmit függvényt a bejelentkezési kérelem feldolgozásához. Meghatároztunk egy feltételt is, amely megjeleníti a user.name naplózást üzenetet, ha van felhasználónk, és a bejelentkezési űrlapot, ha nincs felhasználónk.

Ezután fejezzük be a funkciót. Ez a funkció a következő lépésekben fog működni:

  1. Küldje el a bejelentkezési adatokat a szervernek.
  2. Ha a kérés sikeres (async-wait), akkor tárolja a felhasználói adatokat a localStorage-ban, és állítsa be a felhasználó állapotát.

Kezelje a bejelentkezési eseményt

Határozzuk meg a handleSubmit eseménykezelőt.

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

Megjegyzés: Használjon tryCatch blokkot az aszinkron funkciók hibáinak kezeléséhez.

Most, hogy a funkciónk elkészült, az npm start segítségével futtathatja alkalmazását. Jelentkezzen be a felhasználónévvel : user2, jelszó : jelszó.

Válaszként a következőket kell kapnia. A userId , token és felhasználónév

Ellenőrizze, hogy egy felhasználó korábban bejelentkezett-e

Ezután szeretnénk egy módot annak ellenőrzésére, hogy van-e bejelentkezett felhasználó minden alkalommal, amikor az alkalmazás betöltődik. Ehhez használjuk a useEffect kampót.

 useEffect(() => { const loggedInUser = localStorage.getItem("user"); if (loggedInUser) { const foundUser = JSON.parse(loggedInUser); setUser(foundUser); } }, []); 

Ne felejtsen el egy üres függőségi tömböt használni a useEffect kampójában, hogy ellenőrizze, van-e bejelentkezett felhasználó az alkalmazás első betöltésekor.

Most az alkalmazásunknak tökéletesen kell működnie. Az alábbi oldalt azután kapjuk meg, hogy egy felhasználó először bejelentkezett, és tároltuk adataikat. Ha frissíti az oldalt, látni fogja, hogy felhasználónk továbbra is bejelentkezett marad, és a bejelentkezett oldal továbbra is megjelenik.

Bónusz tippként itt olvashatja el a kijelentkezés végrehajtását.

A Kijelentkezés funkció megvalósítása

A kijelentkezéshez egyszerűen kiürítjük a felhasználói állapotot, és eltávolítjuk a felhasználót a localStorage szolgáltatásból.

Ezt valósítsuk meg.

Először létrehozunk egy kijelentkezési gombot

logout 

Ezután létrehozzuk a kijelentkezési funkciót.

const handleLogout = () => { setUser({}); setUsername(""); setPassword(""); localStorage.clear(); }; 

És ennyi, kész.

Itt található egy link a GitHub teljes lényegére. Ott követhetsz további frissítésekért.