Πώς να ανακατευθύνετε έναν χρήστη μετά τη σύνδεση στο React

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

Σε αυτό το άρθρο, θα εξετάσουμε πώς μπορείτε να ανακατευθύνετε έναν χρήστη από μια περιορισμένη σελίδα σε μια σελίδα σύνδεσης. Θα συζητήσουμε επίσης πώς μπορείτε να επιστρέψετε τον χρήστη στη σελίδα στην οποία βρισκόταν μετά τη σύνδεση.

Στο React Router v6, υπάρχουν δύο τρόποι που μπορείτε να χρησιμοποιήσετε για να ανακατευθύνετε έναν χρήστη — το στοιχείο Navigate και το useNavigate() άγκιστρο.

Δημιουργήστε μια εφαρμογή React

Δημιουργήστε μια απλή εφαρμογή React χρησιμοποιώντας το δημιουργία-αντίδραση-εφαρμογή εντολή. Θα χρησιμοποιήσετε αυτήν την εφαρμογή για να ελέγξετε πώς το στοιχείο Πλοήγηση και το useNavigate() δουλειά με γάντζο.

npx δημιουργώ-react-app react-redirect

Δημιουργήστε μια Σελίδα σύνδεσης

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

Δημιουργήστε ένα νέο αρχείο στο src φάκελο και ονομάστε τον Login.js. Στη συνέχεια, προσθέστε τον ακόλουθο κώδικα, στο δημιουργήστε τη φόρμα σύνδεσης.

εισαγωγή { useState } από "αντιδρώ";
εισαγωγή Ταμπλό από "./Ταμπλό";
συνθ Σύνδεση = () => {
 const [όνομα χρήστη, όνομα χρήστη] = useState("");
 const [password, setpassword] = useState("");
συνθ [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| ψευδής));
 const users = [{ όνομα χρήστη: "Ιωάννα", Κωδικός πρόσβασης: "κωδικός δοκιμής" }];
συνθ handleSubmit = (e) => {
μι.preventDefault()
συνθ λογαριασμός = users.find((user) => user.username όνομα χρήστη);
 εάν (λογαριασμός && account.password password) {
 επικυρωμένος (αληθής)
 localStorage.setItem("πιστοποιημένος", αλήθεια);
 }
 };
ΕΠΙΣΤΡΟΦΗ (
<div>
<Π>Καλως ορισες πισω</Π>
<φόρμα onSubmit={handleSubmit}>
<εισαγωγή
 τύπος="κείμενο"
 όνομα="Όνομα χρήστη"
 value={όνομα χρήστη}
 onChange={(e) => setusername (e.target.value)}
 />
<εισαγωγή
 τύπος="Κωδικός πρόσβασης"
 όνομα="Κωδικός πρόσβασης"
 onChange={(e) => setpassword (e.target.value)}
 />
<τύπος εισόδου="υποβάλλουν" αξία="υποβάλλουν" />
</form>
</div>
 )
};
}
εξαγωγήΠροκαθορισμένο Σύνδεση;

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

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

Προσθέστε τον ακόλουθο κώδικα σε ένα νέο αρχείο που ονομάζεται Dashboard.js.

συνθ Ταμπλό = () => {
ΕΠΙΣΤΡΟΦΗ (
<div>
<Π>Καλώς ορίσατε στον Πίνακα ελέγχου σας</Π>
</div>
 );
};
εξαγωγήΠροκαθορισμένο Ταμπλό;

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

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

npm εγκαθιστώ react-router-dom

Στο index.js, ρυθμίστε τη δρομολόγηση για την εφαρμογή σας.

εισαγωγή Αντιδρώ από "αντιδρώ";
εισαγωγή ReactDOM από "react-dom/client";
εισαγωγή App από "./Εφαρμογή";
εισαγωγή { BrowserRouter, Route, Routes } από "react-router-dom"?
εισαγωγή Σύνδεση από "./Σύνδεση";
εισαγωγή Ταμπλό από "./Ταμπλό";
συνθ root = ReactDOM.createRoot(έγγραφο.getElementById("root"));
ρίζα.καθιστώ(
<Αντιδρώ. StrictMode>
<BrowserRouter>
<Διαδρομές>
<Στοιχείο ευρετηρίου διαδρομής={<Εφαρμογή />} />
<Διαδρομή διαδρομής="Σύνδεση" στοιχείο ={<Σύνδεση />} />
<Διαδρομή διαδρομής="ταμπλό" στοιχείο ={<Ταμπλό />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);

Προστατέψτε τη σελίδα του πίνακα ελέγχου

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

εισαγωγή { useEffect, useState } από "αντιδρώ";
συνθ Ταμπλό = () => {
συνθ [αυθεντικοποιημένος, επικυρωμένος] = useState(μηδενικό);
 useEffect(() => {
 const logedInUser = localStorage.getItem("πιστοποιημένος");
 if (loggedInUser) {
 με έλεγχο ταυτότητας (loggedInUser);
 }
 }, []);
 εάν (!επικυρωθεί) {
// Ανακατεύθυνση
 } αλλού {
ΕΠΙΣΤΡΟΦΗ (
<div>
<Π>Καλώς ορίσατε στον Πίνακα ελέγχου σας</Π>
</div>
 );
 }
};
εξαγωγήΠροκαθορισμένο Ταμπλό;

Ανακατευθύνετε τον χρήστη στη σελίδα σύνδεσης χρησιμοποιώντας το Navigate

Το στοιχείο Navigate αντικατέστησε το στοιχείο Redirect που χρησιμοποιήθηκε στο React Router v5. Εισαγωγή Πλοηγηθείτε από το react-router-dom.

εισαγωγή { Πλοήγηση } από "react-router-dom"?

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

εάν (!επικυρωθεί) {
 ΕΠΙΣΤΡΟΦΗ <Πλοηγηθείτε αντικατάσταση σε="/login" />;
} αλλού {
ΕΠΙΣΤΡΟΦΗ (
<div>
<Π>Καλώς ορίσατε στον Πίνακα ελέγχου σας</Π>
</div>
 );
}

Το στοιχείο Navigate είναι ένα δηλωτικό API. Βασίζεται σε ένα συμβάν χρήστη, το οποίο σε αυτήν την περίπτωση είναι ο έλεγχος ταυτότητας για να προκαλέσει μια αλλαγή κατάστασης και κατά συνέπεια να προκαλέσει μια εκ νέου απόδοση στοιχείου. Σημειώστε ότι δεν χρειάζεται να χρησιμοποιήσετε τη λέξη-κλειδί αντικατάστασης. Η χρήση του αντικαθιστά την τρέχουσα διεύθυνση URL αντί να την ωθήσει στο ιστορικό του προγράμματος περιήγησης.

Ανακατεύθυνση χρήστη σε άλλη σελίδα χρησιμοποιώντας useNavigate()

Η άλλη επιλογή για την εκτέλεση ανακατευθύνσεων στο React είναι η useNavigate() άγκιστρο. Αυτό το άγκιστρο παρέχει πρόσβαση στο επιτακτικό API πλοήγησης. Ξεκινήστε εισάγοντάς το από το react-router-dom.

εισαγωγή { useNavigate } από "react-router-dom"?

Ανακατεύθυνση μόλις ο χρήστης πιστοποιηθεί με επιτυχία στο handleSubmit() λειτουργεί ως εξής:

συνθ navigate = useNavigate();
συνθ Σύνδεση = () => {
συνθ navigate = useNavigate();
 const [όνομα χρήστη, όνομα χρήστη] = useState("");
 const [password, setpassword] = useState("");
συνθ [αυθεντικοποιημένος, επικυρωμένος] = useState(
 localStorage.getItem (localStorage.getItem("πιστοποιημένος") || ψευδής)
 );
 const users = [{ όνομα χρήστη: "Ιωάννα", Κωδικός πρόσβασης: "κωδικός δοκιμής" }];
συνθ handleSubmit = (e) => {
μι.preventDefault();
συνθ λογαριασμός = users.find((user) => user.username όνομα χρήστη);
 εάν (λογαριασμός && account.password password) {
 localStorage.setItem("πιστοποιημένος", αλήθεια);
 κυβερνώ("/dashboard");
 }
 };
ΕΠΙΣΤΡΟΦΗ (
<div>
<φόρμα onSubmit={handleSubmit}>
<εισαγωγή
 τύπος="κείμενο"
 όνομα="Όνομα χρήστη"
 value={όνομα χρήστη}
 onChange={(e) => setusername (e.target.value)}
 />
<εισαγωγή
 τύπος="Κωδικός πρόσβασης"
 όνομα="Κωδικός πρόσβασης"
 onChange={(e) => setpassword (e.target.value)}
 />
<τύπος εισόδου="υποβάλλουν" αξία="υποβάλλουν" />
</form>
</div>
 );
};

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

Κατά τη δημιουργία εφαρμογών, ένας από τους στόχους είναι να προσφέρουμε στους χρήστες την καλύτερη εμπειρία. Μπορείτε να το κάνετε αυτό πηγαίνοντας τον χρήστη πίσω στη σελίδα που ήταν πριν, ανακατευθύνοντάς τον στη σελίδα σύνδεσης. Μπορείτε να το κάνετε αυτό περνώντας το -1 για να πλοηγηθείτε ως εξής, πλοήγηση (-1). Λειτουργεί με τον ίδιο τρόπο όπως το πάτημα του κουμπιού επιστροφής στο πρόγραμμα περιήγησής σας.

Δρομολόγηση στο React

Σε αυτό το άρθρο, μάθατε πώς μπορείτε να ανακατευθύνετε έναν χρήστη σε άλλη σελίδα στο React χρησιμοποιώντας τόσο το στοιχείο Πλοήγηση όσο και το useNavigate() άγκιστρο. Το άρθρο χρησιμοποίησε μια φόρμα σύνδεσης για να δείξει πώς μπορείτε να ανακατευθύνετε μη πιστοποιημένους χρήστες από μια προστατευμένη σελίδα στη σελίδα σύνδεσης.