Πώς να επιμείνετε συνδεδεμένος χρήστης στο React

Εάν εκτελέσετε μια γρήγορη αναζήτηση στο Google για να διατηρήσετε έναν συνδεδεμένο χρήστη στο React (ή να διατηρήσετε έναν χρήστη συνδεδεμένο στο React), δεν θα έχετε πολλά απλά αποτελέσματα. Δεν είναι πραγματικά εύκολο να ακολουθήσετε παραδείγματα για το πώς να το επιτύχετε. Έτσι αποφάσισα ότι έπρεπε να γράψω αυτόν τον απλό οδηγό.

Μπορεί να έχετε κάνει αναζήτηση σε αυτό και είδατε τη λέξη localStorage να ρίχνεται. Ναι, θα χρησιμοποιήσουμε το localStorage, αλλά θα σας δείξω ακριβώς πώς γίνεται.

Μερικές σημειώσεις στο localStorage.

  1. Το localStorage είναι η βάση δεδομένων του προγράμματος περιήγησης. Τα δεδομένα αποθηκεύονται στο πρόγραμμα περιήγησής σας στη μνήμη του υπολογιστή σας.
  2. Το localStorage είναι συγκεκριμένο για μια προέλευση. Με άλλα λόγια, το localStorage για έναν ιστότοπο δεν είναι προσβάσιμο από άλλο.

Αρχική εγκατάσταση

Ας αρχίσουμε. Έχω αναπτύξει έναν απλό γρήγορο διακομιστή στο Heroku για χρήση στη δοκιμή αυτής της εφαρμογής.

  1. Δημιουργήστε μια νέα εφαρμογή React και κατευθυνθείτε στο στοιχείο.
  2. Εγκαταστήστε το axios χρησιμοποιώντας npm install axiosκαι εισαγάγετέ το μέσα
  3. Στη συνέχεια, δημιουργήστε μια απλή φόρμα σύνδεσης που αποδέχεται ένα όνομα χρήστη και έναν κωδικό πρόσβασης.
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; 

Όπως μπορείτε να δείτε, ορίσαμε μια ασύγχρονη συνάρτηση handleSubmit για την επεξεργασία του αιτήματος σύνδεσης. Έχουμε επίσης ορίσει έναν όρο που εμφανίζει ένα χρήστη. Το όνομα είναι συνδεδεμένο στο μήνυμα εάν έχουμε χρήστη και τη φόρμα σύνδεσης εάν δεν έχουμε χρήστη.

Στη συνέχεια, ας ολοκληρώσουμε τη λειτουργία. Αυτή η λειτουργία θα λειτουργήσει στα ακόλουθα βήματα:

  1. Στείλτε τα στοιχεία σύνδεσης στον διακομιστή.
  2. Εάν το αίτημα είναι επιτυχές (async-await), αποθηκεύστε τις πληροφορίες χρήστη στο localStorage και ορίστε την κατάσταση του χρήστη.

Χειριστείτε το συμβάν σύνδεσης

Ας ορίσουμε το χειριστή συμβάντος 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) }; 

Σημείωση: Χρησιμοποιήστε ένα μπλοκ tryCatch για τον χειρισμό σφαλμάτων σε λειτουργίες ασύγχρονης.

Τώρα που ολοκληρώθηκε η λειτουργία μας, μπορείτε να εκτελέσετε το npm start για να δοκιμάσετε την εφαρμογή σας. Συνδεθείτε με το όνομα χρήστη : user2, password : password.

Θα πρέπει να λάβετε τα ακόλουθα ως απάντηση. Το userId , το διακριτικό και το όνομα χρήστη

Ελέγξτε εάν ένας χρήστης είχε προηγουμένως συνδεθεί

Στη συνέχεια, θέλουμε έναν τρόπο να ελέγξουμε εάν υπάρχει χρήστης που συνδέεται κάθε φορά που φορτώνεται η εφαρμογή. Για αυτό, χρησιμοποιούμε το άγκιστρο useEffect.

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

Θυμηθείτε να χρησιμοποιήσετε έναν άδειο πίνακα εξάρτησης στο άγκιστρο useEffect σας, ώστε να ελέγχει εάν υπάρχει συνδεδεμένος χρήστης την πρώτη φορά που φορτώνεται η εφαρμογή.

Τώρα η εφαρμογή μας πρέπει να λειτουργεί τέλεια. Παίρνουμε την παρακάτω σελίδα αφού ένας χρήστης συνδεθεί για πρώτη φορά και αποθηκεύονται τα στοιχεία του. Εάν ανανεώσετε τη σελίδα, θα δείτε ότι ο χρήστης μας παραμένει συνδεδεμένος και η συνδεδεμένη σελίδα συνεχίζει να εμφανίζεται.

Ως συμβουλή μπόνους, μπορείτε να εφαρμόσετε την αποσύνδεση.

Εφαρμογή λειτουργικότητας αποσύνδεσης

Για αποσύνδεση, απλώς αδειάζουμε την κατάσταση χρήστη και καταργούμε τον χρήστη από το localStorage.

Ας το εφαρμόσουμε.

Αρχικά, δημιουργούμε ένα κουμπί αποσύνδεσης

logout 

Στη συνέχεια, δημιουργούμε τη συνάρτηση αποσύνδεσης.

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

Και αυτό είναι, τελειώσαμε.

Ακολουθεί ένας σύνδεσμος για την πλήρη ουσία στο GitHub. Μπορείτε να με ακολουθήσετε εκεί για περισσότερες ενημερώσεις.