Yleensä verkkosovelluksia rakennettaessa kirjautumissivuja käytetään yksityisten sivujen suojaamiseen. Esimerkiksi blogialustalla kojelauta voi olla vain todennettujen käyttäjien käytettävissä. Jos todentamaton käyttäjä yrittää päästä sivulle, sovellus ohjaa hänet kirjautumissivulle. Kun he ovat kirjautuneet sisään, he saavat pääsyn.
Tässä artikkelissa tarkastellaan, kuinka voit ohjata käyttäjän rajoitetulta sivulta kirjautumissivulle. Keskustelemme myös siitä, kuinka voit palauttaa käyttäjän takaisin sivulle, jolla hän oli kirjautumisen jälkeen.
React Router v6:ssa on kaksi tapaa, joilla voit ohjata käyttäjän uudelleen: Navigate-komponentti ja useNavigate() koukku.
Luo React-sovellus
Luo yksinkertainen React-sovellus käyttämällä luo-reagoi-sovellus komento. Tämän sovelluksen avulla voit testata, kuinka Navigoi-komponentti ja useNavigate() koukkutyöt.
npx luoda-react-app react-redirect
Luo kirjautumissivu
Sinun on luotava kirjautumissivu käyttäjien todentamista varten. Koska tämä ei ole todennusopastus, käytä käyttäjätietokantana objektijoukkoa.
Luo uusi tiedosto src kansio ja nimeä se Login.js. Lisää sitten seuraava koodi kohteeseen luo kirjautumislomake.
tuonti { useState } alkaen "reagoi";
tuonti Kojelauta alkaen "./Dashboard";
konst Kirjaudu = () => {
const [käyttäjänimi, setusername] = useState("");
const [salasana, asetasalasana] = useState("");
konst [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| väärä));
const users = [{ käyttäjätunnus: "Jane", Salasana: "testisalasana" }];
konst handleSubmit = (e) => {
e.preventDefault()
konst tili = käyttäjät.find((käyttäjä) => käyttäjä.käyttäjänimi käyttäjänimi);
jos (tili && tili.salasana salasana) {
seauthenticated(totta)
localStorage.setItem("todennettu", totta);
}
};
palata (
<div>
<s>Tervetuloa takaisin</s>
<lomake onSubmit={handleSubmit}>
<syöttö
tyyppi="teksti"
nimi ="Käyttäjätunnus"
arvo={käyttäjänimi}
onChange={(e) => setusername (e.target.value)}
/>
<syöttö
tyyppi="Salasana"
nimi ="Salasana"
onChange={(e) => aseta salasana (e.target.value)}
/>
<syöttötyyppi="Lähetä" arvo ="Lähetä" />
</form>
</div>
)
};
}
viedäoletuksena Kirjaudu sisään;
Tämä on yksinkertainen kirjautumislomake. Kun käyttäjä lähettää käyttäjätunnuksensa ja salasanansa, heidät verrataan taulukkoon. Jos nämä tiedot ovat oikein, todennettu tila on asetettu totta. Koska tarkistat, onko käyttäjä todennettu Dashboard-komponentissa, sinun on myös tallennettava todennustila jonnekin, johon muut komponentit voivat päästä käsiksi. Tämä artikkeli käyttää paikallista tallennustilaa. Oikeassa sovelluksessa, käyttämällä Reagoi kontekstiin olisi parempi valinta.
Luo hallintapaneelisivu
Lisää seuraava koodi uuteen tiedostoon nimeltä Dashboard.js.
konst Kojelauta = () => {
palata (
<div>
<s>Tervetuloa kojelautaasi</s>
</div>
);
};
viedäoletuksena Kojelauta;
Kojelaudan tulisi olla vain todennettujen käyttäjien käytettävissä. Siksi, kun käyttäjät vierailevat kojelautasivulla, tarkista ensin, onko heidät todennettu. Jos ne eivät ole, ohjaa heidät kirjautumissivulle.
Voit tehdä tämän määrittämällä ensin sovellusreitit React-reitittimellä.
npm Asentaa react-router-dom
Määritä sovelluksesi reititys index.js: ssä.
tuonti Reagoi alkaen "reagoi";
tuonti ReactDOM alkaen "react-dom/client";
tuonti Sovellus alkaen "./Sovellus";
tuonti { BrowserRouter, Route, Routes } alkaen "react-router-dom";
tuonti Kirjaudu sisään alkaen "./Kirjaudu sisään";
tuonti Kojelauta alkaen "./Dashboard";
konst root = ReactDOM.createRoot(asiakirja.getElementById("juuri"));
juuri.render(
<Reagoi. StrictMode>
<BrowserRouter>
<Reitit>
<Route index element={<Sovellus />} />
<Reittipolku="Kirjaudu sisään" element={<Kirjaudu sisään />} />
<Reittipolku="kojelauta" element={<Kojelauta />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Suojaa kojelautasivua
Nyt kun sovellusreitit on määritetty, seuraava vaihe on tee kojelaudan reitti yksityiseksi. Kun Dashboard-komponentti latautuu, todennustila haetaan paikallisesta tallennustilasta ja tallennetaan tilaan. Jos käyttäjää ei ole todennettu, sovellus ohjaa kirjautumissivulle, muuten se näyttää kojelautasivun.
tuonti { useEffect, useState } alkaen "reagoi";
konst Kojelauta = () => {
konst [authenticated, setauthenticated] = useState(tyhjä);
useEffect(() => {
const loggedInUser = localStorage.getItem("todennettu");
if (loggedInUser) {
setauthenticated (loggedInUser);
}
}, []);
if (!authenticated) {
// Uudelleenohjaus
} muu {
palata (
<div>
<s>Tervetuloa kojelautaasi</s>
</div>
);
}
};
viedäoletuksena Kojelauta;
Uudelleenohjaa käyttäjä kirjautumissivulle Navigoin avulla
Navigate-komponentti korvasi Redirect-reitittimen v5:ssä käytetyn Redirect-komponentin. Tuo Navigoi osoitteesta react-router-dom.
tuonti { Navigoi } alkaen "react-router-dom";
Voit ohjata todentamattomat käyttäjät uudelleen seuraavasti.
if (!authenticated) {
palata <Navigoi korvaa kohtaan="/login" />;
} muu {
palata (
<div>
<s>Tervetuloa kojelautaasi</s>
</div>
);
}
Navigoi-komponentti on deklaratiivinen API. Se luottaa käyttäjän tapahtumaan, joka tässä tapauksessa on todennus, joka aiheuttaa tilan muutoksen ja sen seurauksena komponentin uudelleenrenderöinnin. Huomaa, että sinun ei tarvitse käyttää korvausavainsanaa. Sen käyttäminen korvaa nykyisen URL-osoitteen sen sijaan, että se siirtäisi sen selaimen historiaan.
Ohjaa käyttäjä toiselle sivulle käyttämällä useNavigate()
Toinen vaihtoehto uudelleenohjausten suorittamiseen Reactissa on useNavigate() koukku. Tämä koukku tarjoaa pääsyn navigate imperative API: hen. Aloita tuomalla se react-router-domista.
tuonti { useNavigate } alkaen "react-router-dom";
Ohjaa uudelleen, kun käyttäjä on todennettu onnistuneesti handleSubmit() toimi näin:
konst navigoi = useNavigate();
konst Kirjaudu = () => {
konst navigoi = useNavigate();
const [käyttäjänimi, setusername] = useState("");
const [salasana, asetasalasana] = useState("");
konst [authenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("todennettu") || väärä)
);
const users = [{ käyttäjätunnus: "Jane", Salasana: "testisalasana" }];
konst handleSubmit = (e) => {
e.preventDefault();
konst tili = käyttäjät.find((käyttäjä) => käyttäjä.käyttäjänimi käyttäjänimi);
jos (tili && tili.salasana salasana) {
localStorage.setItem("todennettu", totta);
navigoida("/dashboard");
}
};
palata (
<div>
<lomake onSubmit={handleSubmit}>
<syöttö
tyyppi="teksti"
nimi ="Käyttäjätunnus"
arvo={käyttäjänimi}
onChange={(e) => setusername (e.target.value)}
/>
<syöttö
tyyppi="Salasana"
nimi ="Salasana"
onChange={(e) => aseta salasana (e.target.value)}
/>
<syöttötyyppi="Lähetä" arvo ="Lähetä" />
</form>
</div>
);
};
Tässä esimerkissä, kun käyttäjä lähettää lomakkeen oikeilla tiedoilla, hänet ohjataan kojelautaan.
Sovelluksia luotaessa yksi tavoitteista on tarjota käyttäjille paras käyttökokemus. Voit tehdä tämän viemällä käyttäjän takaisin sivulle, jolla hän oli aiemmin, ohjaamalla hänet kirjautumissivulle. Voit tehdä tämän ohittamalla -1 navigoidaksesi näin, navigoi (-1). Se toimii samalla tavalla kuin selaimen Takaisin-painikkeen painaminen.
Reititys Reactissa
Tässä artikkelissa opit, kuinka voit ohjata käyttäjän toiselle sivulle Reactissa käyttämällä sekä Navigoi-komponenttia että useNavigate() koukku. Artikkelissa käytettiin kirjautumislomaketta osoittamaan, kuinka voit ohjata todentamattomat käyttäjät suojatulta sivulta kirjautumissivulle.
