Kuinka ylläpitää kirjautunutta käyttäjää React

Jos suoritat nopean Google-haun kirjautuneen käyttäjän jatkamiseksi Reactissa (tai pidät käyttäjän kirjautuneena Reactiin), et saa paljon suoraviivaisia ​​tuloksia. Ei ole oikeastaan ​​helppoja seurata esimerkkejä siitä, miten tämä saavutetaan. Joten päätin, että minun oli kirjoitettava tuo yksinkertainen opas.

Olet ehkä tehnyt haun tästä ja nähnyt sanan localStorage heittävän ympärille. Kyllä, käytämme localStorage-ohjelmaa, mutta näytän sinulle tarkalleen, miten se tehdään.

Joitakin muistiinpanoja paikallisesta varastosta.

  1. localStorage on selaimen tietokanta. Tiedot tallennetaan selaimeesi tietokoneen muistiin.
  2. localStorage on erityinen alkuperälle. Toisin sanoen toinen sivusto ei voi käyttää localStorage-sivustoa.

Alkuasennus

Aloitetaan. Olen asentanut yksinkertaisen pikapalvelimen Herokuun käytettäväksi tämän sovelluksen testaamiseen.

  1. Luo uusi React-sovellus ja siirry komponenttiin.
  2. Asenna aksiot käyttämällä npm install axiosja tuo se sisään
  3. Luo seuraavaksi yksinkertainen kirjautumislomake, joka hyväksyy käyttäjänimen ja salasanan.
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; 

Kuten näette, olemme määrittäneet asynkronisen handleSubmit- toiminnon kirjautumispyynnön käsittelemiseksi. Olemme myös määrittäneet ehdollisuuden, joka näyttää käyttäjän. Käyttäjänimi kirjataan sisään viestissä, jos meillä on käyttäjä, ja kirjautumislomakkeella, jos meillä ei ole käyttäjää.

Seuraavaksi suoritetaan toiminto. Tämä toiminto toimii seuraavissa vaiheissa:

  1. Lähetä kirjautumistiedot palvelimelle.
  2. Jos pyyntö onnistuu (async-await), tallenna käyttäjätiedot localStorageen ja aseta käyttäjän tila.

Käsittele kirjautumistapahtumaa

Määritellään handleSubmit tapahtumakäsittelijän.

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

Huomaa: Käytä tryCatch- lohkoa käsittelemään virheitä asynkronointitoiminnoissa .

Nyt kun toiminto on suoritettu, voit testata sovellustasi suorittamalla npm start . Kirjaudu sisään käyttäjätunnuksella : user2, salasanalla : salasanalla.

Sinun tulisi saada seuraava vastauksena. UserId , merkki ja käyttäjätunnus

Tarkista, onko käyttäjä aiemmin kirjautunut sisään

Seuraavaksi haluamme tapan tarkistaa, onko käyttäjä kirjautuneena joka kerta, kun sovellus latautuu. Tätä varten käytämme useEffect-koukkua.

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

Muista käyttää tyhjää riippuvuusryhmää useEffect-koukussa, jotta se tarkistaa, onko sisäänkirjautunut käyttäjä ensimmäisen kerran, kun sovellus latautuu.

Nyt sovelluksen pitäisi toimia täydellisesti. Saamme alla olevan sivun, kun käyttäjä on kirjautunut sisään ensimmäisen kerran ja hänen tietonsa on tallennettu. Jos päivität sivun, huomaat, että käyttäjä pysyy kirjautuneena ja kirjautuneena oleva sivu näkyy edelleen.

Bonusvinkkinä voit selvittää uloskirjautumisen seuraavasti.

Logout-toiminnon käyttöönotto

Kirjautumista varten tyhjennämme yksinkertaisesti käyttäjän tilan ja poistamme käyttäjän localStorage-palvelusta.

Toteutetaan se.

Ensin luomme kirjautumispainikkeen

logout 

Sitten luomme uloskirjautumistoiminnon.

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

Ja kaikki, olemme valmiit.

Tässä on linkki GitHubin täydelliseen pääsisältöön. Voit seurata minua siellä saadaksesi lisää päivityksiä.