Kaip išlaikyti prisijungusį vartotoją „React“

Jei paleidžiate greitą „Google“ paiešką, norėdami išlaikyti „React“ prisijungusį vartotoją (arba palaikote prisijungusį „React“ vartotoją), negaunate daug tiesmuko rezultatų. Iš tikrųjų nėra lengva sekti pavyzdžiais, kaip tai pasiekti. Taigi nusprendžiau parašyti tą paprastą vadovą.

Galbūt atlikote paiešką ir pamatėte, kad žodis „ localStorage“ mėtosi . Taip, naudosime „ localStorage“, bet aš jums parodysiu, kaip tai tiksliai daroma.

Keletas pastabų apie localStorage.

  1. localStorage yra naršyklės duomenų bazė. Duomenys saugomi jūsų naršyklėje jūsų kompiuterio atmintyje.
  2. localStorage būdinga kilmei. Kitaip tariant, kita svetainė negali pasiekti „localStorage“.

Pradiniai nustatymai

Pradėkime. „Heroku“ įdiegiau paprastą greitąjį serverį, kad būtų galima išbandyti šią programą.

  1. Sukurkite naują „React“ programą ir eikite į komponentą.
  2. Įdiekite „axios“ naudodami npm install axiosir importuokite į vidų
  3. Tada sukurkite paprastą prisijungimo formą, kuri priima vartotojo vardą ir slaptažodį.
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; 

Kaip matote, mes nustatėme asinchroninę „ handSubmit“ funkciją, kad apdorotume prisijungimo užklausą. Mes taip pat apibrėžėme sąlygą, kuri rodo, kad vartotojas turi prisijungti prie vartotojo.vardas, jei turime vartotoją, ir prisijungimo formą, jei neturime vartotojo.

Tada atlikime funkciją. Ši funkcija veiks atlikdama šiuos veiksmus:

  1. Siųskite prisijungimo duomenis į serverį.
  2. Jei užklausa sėkminga (async-await), saugokite vartotojo informaciją „localStorage“ ir nustatykite vartotojo būseną.

Tvarkykite prisijungimo įvykį

Apibrėžkime „ handSubmit“ įvykių tvarkyklę.

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

Pastaba: naudokite „ tryCatch“ bloką, kad tvarkytumėte klaidas asinchroninėse funkcijose.

Dabar, kai mūsų funkcija atlikta, galite paleisti „ npm start“, kad išbandytumėte savo programą. Prisijunkite naudodami vartotojo vardą : user2, slaptažodį : slaptažodį.

Kaip atsakymą turėtumėte gauti: „ UserId“ , prieigos raktas ir vartotojo vardas

Patikrinkite, ar vartotojas anksčiau prisijungė

Tada norime, kaip patikrinti, ar kiekvieną kartą įkeliant programą yra prisijungęs vartotojas. Tam mes naudojame „useEffect“ kablį.

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

Nepamirškite „useEffect“ kablyje naudoti tuščią priklausomybės masyvą, kad jis patikrintų, ar pirmą kartą įkeliant programą yra prisijungęs vartotojas.

Dabar mūsų programa turėtų veikti puikiai. Žemiau pateiktą puslapį gauname po to, kai vartotojas pirmą kartą prisijungia ir saugo jo informaciją. Jei atnaujinsite puslapį, pamatysite, kad mūsų vartotojas lieka prisijungęs, o prisijungęs puslapis ir toliau rodomas.

Kaip premijos patarimą, štai kaip įgyvendinti atsijungimą.

Atsijungimo funkcijų įgyvendinimas

Norėdami atsijungti, mes tiesiog ištuštiname vartotojo būseną ir pašaliname jį iš „localStorage“.

Įgyvendinkime tai.

Pirmiausia sukuriame atsijungimo mygtuką

logout 

Tada sukursime atsijungimo funkciją.

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

Ir viskas, mes baigėme.

Čia pateikiama nuoroda į visą „GitHub“ esmę. Galite sekti mane ten, kad gautumėte daugiau naujinių.