Suojatut reitit ovat reittejä, jotka antavat pääsyn vain valtuutetuille käyttäjille. Tämä tarkoittaa, että käyttäjien on ensin täytettävä tietyt ehdot ennen kuin he pääsevät kyseiselle reitille. Sovelluksesi voi esimerkiksi edellyttää, että vain kirjautuneet käyttäjät pääsevät hallintapaneelisivulle.

Tässä opetusohjelmassa opit luomaan suojattuja reittejä React-sovelluksessa.

Huomaa, että käytät React Router v6:ta, joka on hieman erilainen kuin aiemmat versiot.

Päästä alkuun

Aloita käyttämällä luo-reagoi-sovellus käynnistääksesi yksinkertaisen React-sovelluksen.

npx create-react-app Protect-routes-react

Siirry juuri luotuun kansioon ja käynnistä sovellus.

cd suojaa-reitit-reagoi
npm aloitus

Avaa sovelluskansio haluamallasi tekstieditorilla ja puhdista se. Sinun app.js pitäisi näyttää tältä.

function App() {
 palata ;
}
Vie oletussovellus;

Olet nyt valmis määrittämään reitit.

Aiheeseen liittyvä: Kuinka luoda ensimmäinen reagointisovelluksesi JavaScriptillä

React-reitittimen määrittäminen

Käytät React Routeria sovelluksesi navigoinnin määrittämiseen.

Asentaa react-router-dom.

npm install react-router-dom

Tätä sovellusta varten sinulla on kolme pääsivua:

• Kotisivu (aloitussivu).
• Profiilisivu (suojattu, joten vain sisäänkirjautuneilla käyttäjillä on pääsy).
• Tietoja-sivu (julkinen, jotta kuka tahansa voi käyttää sitä).

Sisään Navbar.js, Käytä Linkki komponentti alkaen react-router-dom luodaksesi navigointilinkkejä eri poluille.

const { Link } = vaatia("react-router-dom");
const Navbar = () => {
 paluu (

 );
};
vie oletusnavigointipalkki;

Sisään app.js luo navigointivalikon linkkejä vastaavat reitit.

tuo { BrowserRouter as Router, Routes, Route } osoitteesta "react-router-dom";
tuo Navbar osoitteesta "./Navbar";
tuonti Kotiin osoitteesta "./Home";
tuo profiili osoitteesta "./Profile";
tuonti Tietoja kohteesta "./About";
function App() {
 paluu (



} />
} />
} />


 );
}
Vie oletussovellus;

Nyt sinun on luotava komponentit, joihin olet viitannut App.js.

Sisään Home.js:

const Etusivu = () => {
 palata 
Kotisivu
;
};
vienti oletuksena Etusivu;

Sisään Profile.js

const Profiili = () => {
 palata 
Profiilisivu
;
};
Vie oletusprofiili;

Sisään About.js

const Tietoja = () => {
 palata 
Tietoja sivusta
;
};
vienti oletus Tietoja;

Suojattujen reittien luominen Reactissa

Seuraavaksi luodaan suojattuja reittejä. The Koti ja noin reitit ovat julkisia, mikä tarkoittaa, että kuka tahansa voi käyttää niitä, mutta profiilireitti vaatii käyttäjien todennuksen ensin. Siksi sinun on luotava tapa kirjautua käyttäjille.

Väärennetyn todennuksen määrittäminen

Koska tämä ei ole todennusopastus, käytät Reactia käytä valtion koukkua simuloida kirjautumisjärjestelmää.

Sisään App.js, lisää seuraava.

tuo { Routes, Route, BrowserRouter } kohteesta "react-router-dom";
tuo { useState } "react"-kentästä;
// Muut tuontistamementit
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const kirjautuminen = () => {
 setisLoggedIn (tosi);
 };
 const logout = () => {
 setisLoggedIn (false);
 };
 paluu (


 {isKirjautunut? (
Kirjautua ulos
 ): (
Kirjaudu sisään
 )}



 );
}
Vie oletussovellus;

Täällä seuraat tilaa käyttävän käyttäjän kirjautumistilaa. Sinulla on kaksi painiketta, sisäänkirjautuminen ja uloskirjautuminen. Nämä painikkeet näytetään vuorotellen sen mukaan, onko käyttäjä kirjautunut sisään vai ei.

Jos käyttäjä on kirjautunut ulos, sisäänkirjautumispainike tulee näkyviin. Napsauttamalla sitä käynnistää kirjautumistoiminnon, joka päivittää onKirjautunut sisään tilasta tosi ja vuorostaan ​​näyttö sisäänkirjautumisesta uloskirjautumispainikkeeseen.

Aiheeseen liittyvä: Mikä on käyttäjän todennus ja miten se toimii?

Yksityisten komponenttien suojaaminen

Reittien suojaamiseksi myös yksityisillä komponenteilla on oltava pääsy onKirjautunut sisään arvo. Voit tehdä tämän luomalla uuden komponentin, joka hyväksyy onKirjautunut sisään tila rekvisiittana ja yksityinen komponentti lapsena.

Jos esimerkiksi uuden komponentin nimi on "Suojattu", hahmonnat tämän kaltaisen yksityisen komponentin.

Suojattu komponentti tarkistaa, onko onKirjautunut sisään on totta vai tarua. Jos se on totta, se jatkaa ja palauttaa yksityisen komponentin. Jos se on epätosi, se ohjaa käyttäjän sivulle, jolla hän voi kirjautua sisään.

Lue tästä artikkelista lisätietoja muista tavoista, joilla voit hahmontaa komponentin ehdoista riippuen ehdollinen renderöinti Reactissa.

Luo sovelluksessasi Protected.js.

tuo { Navigoi } osoitteesta "react-router-dom";
const Protected = ({ onKirjautunut sisään, lapset }) => {
 if (!isLoggedIn) {
 palata ;
 }
 palauttaa lapset;
};
vienti oletus Suojattu;

Tässä komponentissa if-käskyä käytetään tarkistamaan, onko käyttäjä todennettu. Jos he eivät ole, Navigoida alkaen react-router-dom ohjaa heidät etusivulle. Kuitenkin, jos käyttäjä on todennettu, alikomponentti hahmonnetaan.

Käyttää Protected.js sisään App.js muokata Profiili sivun reitti.

 polku="/profiili"
 element={



 }
/>

App.js pitäisi näyttää tältä.

tuo { Routes, Route, BrowserRouter } kohteesta "react-router-dom";
tuo { useState } "react"-kentästä;
tuo Navbar osoitteesta "./Navbar";
tuonti Suojattu "./Protected":ltä;
tuonti Kotiin osoitteesta "./Home";
tuonti Tietoja kohteesta "./About";
tuo profiili osoitteesta "./Profile";
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const kirjautuminen = () => {
 setisLoggedIn (tosi);
 };
 const logout = () => {
 setisLoggedIn (false);
 };
 paluu (




 {isKirjautunut? (
Kirjautua ulos
 ): (
Kirjaudu sisään
 )}

} />
 element={



 }
 />
} />





 );
}
Vie oletussovellus;

Siinä se suojattujen reittien luomisessa. Pääset nyt Profiilisivulle vain, jos olet kirjautunut sisään. Jos yrität navigoida Profiilisivulle kirjautumatta sisään, sinut ohjataan etusivulle.

Rooliperusteinen kulunvalvonta

Tämä opetusohjelma osoitti, kuinka voit estää todentamattomia käyttäjiä pääsemästä sivulle React-sovelluksessa. Joissakin tapauksissa saatat joutua menemään vielä pidemmälle ja rajoittamaan käyttäjiä heidän roolinsa perusteella. Voit esimerkiksi määrittää, että sivu on analytiikkasivu, joka myöntää pääsyn vain järjestelmänvalvojille. Täällä sinun on lisättävä suojattuun komponenttiin logiikka, joka tarkistaa, täyttääkö käyttäjä vaaditut ehdot.

Ehdollisen renderöinnin toteuttaminen React.js: ssa (esimerkein)

Ehdollinen renderöinti on hyödyllinen tapa parantaa sovellustasi. Tässä on valikoima tapoja käyttää sitä.

Lue Seuraava

Kirjailijasta