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

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

Σημειώστε ότι θα χρησιμοποιείτε το React Router v6, το οποίο είναι λίγο διαφορετικό από τις προηγούμενες εκδόσεις.

Ξεκινώντας

Για να ξεκινήσετε, χρησιμοποιήστε δημιουργία-αντίδραση-εφαρμογή για να εκκινήσετε μια απλή εφαρμογή React.

npx create-react-app protect-routes-react

Μεταβείτε στον φάκελο που μόλις δημιουργήθηκε και ξεκινήστε την εφαρμογή σας.

cd protect-routes-react
npm έναρξη

Ανοίξτε το φάκελο της εφαρμογής σας με το πρόγραμμα επεξεργασίας κειμένου που προτιμάτε και καθαρίστε τον. Τα δικα σου app.js πρέπει να μοιάζει με αυτό.

συνάρτηση Εφαρμογή() {
 ΕΠΙΣΤΡΟΦΗ ;
}
εξαγωγή προεπιλεγμένη εφαρμογή?

Τώρα είστε έτοιμοι να ρυθμίσετε τις διαδρομές.

Σχετιζομαι με: Πώς να δημιουργήσετε την πρώτη σας εφαρμογή React με JavaScript

Ρύθμιση του δρομολογητή React

Θα χρησιμοποιήσετε το React Router για να ρυθμίσετε την πλοήγηση για την εφαρμογή σας.

Εγκαθιστώ react-router-dom.

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

Για αυτήν την εφαρμογή, θα έχετε τρεις κύριες σελίδες:

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

Σε Navbar.js, Χρησιμοποιήστε το Σύνδεσμος συστατικό από react-router-dom για να δημιουργήσετε συνδέσμους πλοήγησης σε διάφορες διαδρομές.

const { Link } = require("react-router-dom");
const Navbar = () => {
 ΕΠΙΣΤΡΟΦΗ (

 );
};
εξαγωγή προεπιλεγμένη γραμμή πλοήγησης.

Σε app.js δημιουργήστε τις διαδρομές που ταιριάζουν με τους συνδέσμους στο μενού πλοήγησης.

εισαγωγή { BrowserRouter as Router, Routes, Route } από το "react-router-dom";
εισαγωγή Navbar από το "./Navbar";
εισαγωγή Αρχική σελίδα από "./Home";
εισαγωγή Προφίλ από το "./Profile";
εισαγωγή Σχετικά από "./About";
συνάρτηση Εφαρμογή() {
 ΕΠΙΣΤΡΟΦΗ (



} />
} />
} />


 );
}
εξαγωγή προεπιλεγμένη εφαρμογή?

Τώρα πρέπει να δημιουργήσετε τα στοιχεία στα οποία αναφέρατε ΕΝΑpp.js.

Σε Home.js:

const Αρχική σελίδα = () => {
 ΕΠΙΣΤΡΟΦΗ 
Αρχική σελίδα
;
};
εξαγωγή προεπιλογή Αρχική σελίδα?

Σε Profile.js

const Προφίλ = () => {
 ΕΠΙΣΤΡΟΦΗ 
Σελίδα προφίλ
;
};
εξαγωγή προεπιλεγμένο Προφίλ.

Σε About.js

const Σχετικά με = () => {
 ΕΠΙΣΤΡΟΦΗ 
Σχετικά με τη σελίδα
;
};
εξαγωγή προεπιλογή Σχετικά?

Δημιουργία προστατευμένων διαδρομών στο React

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

Ρύθμιση Fake Authentication

Δεδομένου ότι αυτό δεν είναι ένα σεμινάριο ελέγχου ταυτότητας, θα χρησιμοποιήσετε το React useState hook για την προσομοίωση ενός συστήματος σύνδεσης.

Σε ΕΝΑpp.js, προσθέστε τα ακόλουθα.

εισαγωγή { Routes, Route, BrowserRouter } από το "react-router-dom";
εισαγωγή { useState } από το "react";
// Άλλες καταθέσεις εισαγωγής
συνάρτηση Εφαρμογή() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (αληθές);
 };
 const logOut = () => {
 setisLoggedIn (false);
 };
 ΕΠΙΣΤΡΟΦΗ (


 {isLoggedIn? (
Αποσύνδεση
 ): (
Σύνδεση
 )}



 );
}
εξαγωγή προεπιλεγμένη εφαρμογή?

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

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

Σχετιζομαι με: Τι είναι ο έλεγχος ταυτότητας χρήστη και πώς λειτουργεί;

Προστασία ιδιωτικών εξαρτημάτων

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

Για παράδειγμα, εάν το νέο σας στοιχείο ονομάζεται "Προστατευμένο", θα αποδώσετε ένα ιδιωτικό στοιχείο όπως αυτό.

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

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

Στην αίτησή σας, δημιουργήστε Protected.js.

εισαγωγή { Navigate } από το "react-router-dom";
const Protected = ({ isLoggedIn, παιδιά }) => {
 αν (!isLoggedIn) {
 ΕΠΙΣΤΡΟΦΗ ;
 }
 επιστρέφουν παιδιά?
};
εξαγωγή προεπιλογή Προστατευμένο?

Σε αυτό το στοιχείο, η δήλωση if χρησιμοποιείται για να ελέγξει εάν ο χρήστης έχει πιστοποιηθεί. Αν δεν είναι, Κυβερνώ από react-router-dom τα ανακατευθύνει στην αρχική σελίδα. Ωστόσο, εάν ο χρήστης έχει πιστοποιηθεί, το θυγατρικό στοιχείο αποδίδεται.

Χρήση Protected.js σε ΕΝΑpp.js τροποποιήστε το Προφίλ διαδρομή σελίδας.

 διαδρομή="/προφίλ"
 στοιχείο ={



 }
/>

App.js πρέπει να μοιάζει με αυτό.

εισαγωγή { Routes, Route, BrowserRouter } από το "react-router-dom";
εισαγωγή { useState } από το "react";
εισαγωγή Navbar από το "./Navbar";
εισαγωγή Προστατεύεται από "./Protected";
εισαγωγή Αρχική σελίδα από "./Home";
εισαγωγή Σχετικά από "./About";
εισαγωγή Προφίλ από το "./Profile";
συνάρτηση Εφαρμογή() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (αληθές);
 };
 const logOut = () => {
 setisLoggedIn (false);
 };
 ΕΠΙΣΤΡΟΦΗ (




 {isLoggedIn? (
Αποσύνδεση
 ): (
Σύνδεση
 )}

} />
 στοιχείο ={



 }
 />
} />





 );
}
εξαγωγή προεπιλεγμένη εφαρμογή?

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

Έλεγχος πρόσβασης βάσει ρόλων

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

Πώς να εφαρμόσετε την υπό όρους απόδοση στο React.js (με παραδείγματα)

Η απόδοση υπό όρους είναι ένας χρήσιμος τρόπος για να βελτιώσετε την εφαρμογή σας. Εδώ είναι μια επιλογή τρόπων χρήσης.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα