Ο έλεγχος ταυτότητας χρησιμεύει ως προστατευτικό εμπόδιο για εφαρμογές λογισμικού, επαληθεύοντας την ταυτότητα των χρηστών και παραχωρώντας πρόσβαση σε προστατευμένους πόρους. Ωστόσο, η απαίτηση επανειλημμένου ελέγχου ταυτότητας από τους χρήστες, ειδικά μέσα σε μία μόνο περίοδο σύνδεσης, μπορεί να οδηγήσει σε απογοήτευση, να εμποδίσει την παραγωγικότητα και να καταστρέψει τη συνολική εμπειρία τους.

Για να ξεπεράσετε αυτήν την πρόκληση, μπορείτε να χρησιμοποιήσετε cookie και χώρο αποθήκευσης περιόδου λειτουργίας για να διατηρηθούν τα δεδομένα ελέγχου ταυτότητας χρήστη και άλλα εξατομικευμένα πληροφορίες—επιτρέποντας στους χρήστες να παραμένουν επαληθευμένοι καθ' όλη τη διάρκεια μιας συνεδρίας χωρίς την ανάγκη συνεχούς ελέγχου ταυτότητας, κατά συνέπεια, βελτίωση την εμπειρία τους.

Διαχείριση δεδομένων συνεδρίας χρήστη με χρήση cookies και αποθήκευσης περιόδου λειτουργίας

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

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

• Πληροφορίες που σχετίζονται με τον έλεγχο ταυτότητας.
• Προτιμήσεις και ρυθμίσεις χρήστη.
• Δραστηριότητα και ιστορικό χρήστη.

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

Αφ 'ετέρου, αποθήκευση περιόδου λειτουργίας—παρόμοιο με τον τοπικό χώρο αποθήκευσης—είναι ένας μηχανισμός αποθήκευσης από την πλευρά του πελάτη που παρέχεται από τα σύγχρονα προγράμματα περιήγησης. Σε αντίθεση με τα cookie, περιορίζεται σε μια συγκεκριμένη περίοδο περιήγησης και είναι προσβάσιμο μόνο στην ίδια καρτέλα ή παράθυρο. Η αποθήκευση περιόδων σύνδεσης προσφέρει έναν απλό και απλό τρόπο αποθήκευσης δεδομένων για συγκεκριμένες περιόδους σύνδεσης για εφαρμογές web.

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

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

Ρυθμίστε ένα έργο React

Για να ξεκινήσετε, ρυθμίστε ένα έργο React χρησιμοποιώντας το Vite. Στη συνέχεια, εγκαταστήστε αυτά τα πακέτα στο έργο σας.

npm εγκατάσταση js-cookie react-router-dom

Στην ιδανική περίπτωση, αφού ένας χρήστης συνδεθεί και τα διαπιστευτήριά του επαληθευτούν επιτυχώς από ένα API ελέγχου ταυτότητας backend, cookie και αποθήκευση περιόδου λειτουργίας αποθηκεύουν διακριτικά ελέγχου ταυτότητας, αναγνωριστικά περιόδου λειτουργίας ή οποιαδήποτε άλλα σχετικά δεδομένα κατά τη διάρκεια της συνεδρία.

Αυτά τα διακριτικά ή αναγνωριστικά μαζί με τα πρόσθετα δεδομένα που είναι αποθηκευμένα στο πρόγραμμα περιήγησης του χρήστη είναι αυτόματα περιλαμβάνονται σε μετέπειτα αιτήματα που υποβάλλονται στον διακομιστή για επαλήθευση προτού ο χρήστης έχει πρόσβαση σε προστατευμένο πόροι.

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

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό Αποθετήριο GitHub.

Διαχείριση δεδομένων συνεδρίας ελέγχου ταυτότητας χρήστη με χρήση cookies

Για να δείξετε πώς να χρησιμοποιείτε cookies για την αποθήκευση πληροφοριών ελέγχου ταυτότητας των χρηστών, προχωρήστε και δημιουργήστε ένα νέο components/Login.jsx αρχείο στο src Ευρετήριο. Μέσα σε αυτό το αρχείο, προσθέστε τον ακόλουθο κώδικα.

1. Κάντε τις παρακάτω εισαγωγές.

   εισαγωγή { useState } από'αντιδρώ';
   εισαγωγή { useNavigate } από'react-router-dom';
   εισαγωγή Μπισκότα από'js-cookie';

2. Δημιουργήστε ένα λειτουργικό στοιχείο και προσθέστε στοιχεία JSX για μια φόρμα σύνδεσης.

   συνθ Είσοδος = () => {
   συνθ [όνομα χρήστη, setUsername] = useState('');
   συνθ [password, setPassword] = useState('');
   ΕΠΙΣΤΡΟΦΗ (
   
   
   
    τύπος="κείμενο"
    placeholder="Όνομα χρήστη"
    value={όνομα χρήστη}
    onChange={(e) => setUsername (e.target.value)}
    />
    τύπος="Κωδικός πρόσβασης"
    placeholder="Κωδικός πρόσβασης"
    value={password}
    onChange={(e) => setPassword (e.target.value)}
    />
   "υποβάλλουν">Είσοδος</button>
    </form>
    );
   };
   εξαγωγήΠροκαθορισμένο Σύνδεση;

Δεδομένου ότι δεν διαθέτουμε ένα backend API για τον έλεγχο ταυτότητας των διαπιστευτηρίων χρήστη, θα δημιουργήσουμε μια συνάρτηση που επαληθεύει τα δεδομένα που έχει εισαγάγει ο χρήστης στη φόρμα σύνδεσης χρησιμοποιώντας δοκιμαστικά διαπιστευτήρια χρήστη. Μέσα στο λειτουργικό στοιχείο, προσθέστε τον ακόλουθο κώδικα.

συνθ testAuthData = {
 όνομα χρήστη: 'δοκιμή',
 Κωδικός πρόσβασης: 'δοκιμή',
 }; 
συνθ authenticateUser = (όνομα χρήστη κωδικός) => {
αν (όνομα χρήστη testAuthData.όνομα χρήστη && κωδικός πρόσβασης testAuthData.password) { 
συνθ UserData = {
 όνομα χρήστη,
 Κωδικός πρόσβασης,
 };
συνθ Χρόνος λήξης = νέοςΗμερομηνία(νέοςΗμερομηνία().getTime() + 60000);
 Cookies.set('auth', JSON.stringify (userData), { λήγει: expirationTime });
ΕΠΙΣΤΡΟΦΗαληθής;
 }
ΕΠΙΣΤΡΟΦΗψευδής;
 };
συνθ handleΕίσοδος = (μι) => {
 e.preventDefault();
συνθ isAuthenticated = authenticateUser (όνομα χρήστη, κωδικός πρόσβασης);
αν (είναι πιστοποιημένο) {
 διαπλέω('/προστατεύεται');
 } αλλού {
// Εμφάνιση μηνύματος σφάλματος ή εκτέλεση άλλων ενεργειών για αποτυχημένο έλεγχο ταυτότητας
 }
 };

μεσα στην authenticateUser λειτουργία, ελέγχει εάν το παρεχόμενο όνομα χρήστη και κωδικός πρόσβασης ταιριάζουν με τα δεδομένα ελέγχου ταυτότητας δοκιμής. Εάν τα διαπιστευτήρια ταιριάζουν, δημιουργείται ένα δεδομένα χρήστη αντικείμενο με το όνομα χρήστη και τον κωδικό πρόσβασης. Στη συνέχεια, ορίζει έναν χρόνο λήξης για το cookie και αποθηκεύει το δεδομένα χρήστη σε ένα cookie με το όνομα auth χρησιμοποιώντας την Cookies.set μέθοδος.

Μετά από επιτυχή έλεγχο ταυτότητας, ένας χρήστης ανακατευθύνεται σε μια προστατευμένη σελίδα, καθώς έχει εξουσιοδότηση πρόσβασης σε προστατευμένους πόρους. Αποθηκεύοντας τις πληροφορίες ελέγχου ταυτότητας σε ένα cookie, δημιουργείτε μια περίοδο λειτουργίας ενεργού χρήστη, επιτρέποντας σε επόμενα αιτήματα να περιλαμβάνουν αυτόματα τις λεπτομέρειες ελέγχου ταυτότητας.

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

Ενημερώστε το Αρχείο App.jsx

Κάντε αλλαγές στο App.jsx αρχείο για το χειρισμό της δρομολόγησης χρήστη μετά από επιτυχή έλεγχο ταυτότητας

εισαγωγή { BrowserRouter, Route, Routes, useNavigate } από'react-router-dom';
εισαγωγή Μπισκότα από'js-cookie';
εισαγωγή Σύνδεση από'./components/Login';
συνθ ProtectedPage = ({... ξεκούραση }) => {
συνθ isAuthenticated = !!Cookies.get('auth');
συνθ navigate = useNavigate();
συνθ handleLogout = () => { 
 Cookies.remove('auth');
 διαπλέω('/Σύνδεση'); 
 };
αν (!isAuthenticated) {
 διαπλέω('/Σύνδεση'); 
ΕΠΙΣΤΡΟΦΗμηδενικό; // Επιστροφή null για να αποτρέψετε την απόδοση οτιδήποτε άλλου
 }
ΕΠΙΣΤΡΟΦΗ (



μέγεθος γραμματοσειράς: '24 px', χρώμα: 'μπλε' }}>Γεια, Κόσμε!</h1>
marginTop: '10 px' }} onClick={handleLogout}>
 Αποσύνδεση
 </button>
 </div>
 );
};


συνθ Εφαρμογή = () => {
ΕΠΙΣΤΡΟΦΗ (


"/protected/*" στοιχείο ={} />
"/Σύνδεση" στοιχείο ={} />
 </Routes>
 </BrowserRouter>
 );
};
εξαγωγήΠροκαθορισμένο Εφαρμογή?

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

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

Τέλος, εκτελέστε την παρακάτω εντολή για να περιστρέψετε τον διακομιστή ανάπτυξης για να δοκιμάσετε την εφαρμογή.

npm εκτέλεση dev

Στο πρόγραμμα περιήγησής σας, μεταβείτε στο http://127.0.0.1:5173/loginκαι εισαγάγετε τα διαπιστευτήρια ελέγχου ταυτότητας δοκιμής. Μετά την επιτυχή σύνδεση, δημιουργείται ένα νέο cookie που περιέχει τα δεδομένα περιόδου λειτουργίας, τα οποία περιλαμβάνουν τις πληροφορίες ελέγχου ταυτότητας δοκιμής.

Μόλις λήξει το cookie ή όταν κάνετε κλικ στο κουμπί αποσύνδεσης, το cookie διαγράφεται. Αυτή η ενέργεια τερματίζει αποτελεσματικά την περίοδο λειτουργίας ενεργού χρήστη και σας αποσυνδέει.

Αποθήκευση δεδομένων ελέγχου ταυτότητας χρήστη με χρήση της αποθήκευσης περιόδου λειτουργίας

Τόσο η αποθήκευση περιόδου λειτουργίας όσο και τα cookies λειτουργούν παρόμοια. Για να αποθηκεύσετε τις απαραίτητες πληροφορίες στον χώρο αποθήκευσης περιόδου λειτουργίας του προγράμματος περιήγησης, μπορείτε να χρησιμοποιήσετε το sessionStorage.setItem μέθοδος.

 sessionStorage.setItem('auth', JSON.stringify (userData));

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

Διερεύνηση πρόσθετων περιπτώσεων χρήσης για cookies και αποθήκευση περιόδου λειτουργίας

Αυτός ο οδηγός υπογράμμισε τον τρόπο χρήσης cookie και αποθήκευσης περιόδου σύνδεσης για την αποθήκευση των διαπιστευτηρίων ελέγχου ταυτότητας των χρηστών. Ωστόσο, τα cookies και η αποθήκευση συνεδριών προσφέρουν ένα ευρύτερο φάσμα δυνατοτήτων πέρα ​​από την αποθήκευση πληροφοριών ελέγχου ταυτότητας.

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