Todennus toimii suojana ohjelmistosovelluksille, varmistaa käyttäjien henkilöllisyyden ja myöntää pääsyn suojattuihin resursseihin. Käyttäjien todentaminen toistuvasti, etenkin yhden istunnon aikana, voi kuitenkin aiheuttaa turhautumista, haitata tuottavuutta ja pilata heidän yleisen käyttökokemuksensa.

Voit voittaa tämän haasteen käyttämällä evästeitä ja istuntojen tallennusta käyttäjien todennustietojen ja muiden henkilökohtaisten tietojen säilyttämiseen tiedot – joiden avulla käyttäjät voivat pysyä todennettuina koko istunnon ajan ilman jatkuvaa uudelleentodennusta, mikä parantaa heidän kokemuksensa.

Käyttäjän istuntotietojen hallinta evästeiden ja istunnon tallennustilan avulla

Käyttäjäistuntojen hallinta on keskeinen osa kestävien ja turvallisten React-sovellusten rakentamista. Istuntotietojen asianmukainen hallinta evästeiden ja istuntotallennustiedon avulla varmistaa sujuvan ja henkilökohtaisen käyttökokemuksen säilyttäen samalla tarvittavat turvatoimenpiteet.

Käyttäjän istuntotiedot sisältävät yleensä tietoja, jotka liittyvät käyttäjän nykyiseen istuntoon tai vuorovaikutukseen sovelluksen kanssa. Nämä tiedot voivat vaihdella sovelluksen vaatimusten ja toiminnallisuuden mukaan, mutta sisältävät yleensä seuraavat tiedot:

• Todennukseen liittyvät tiedot.
• Käyttäjän asetukset ja asetukset.
• Käyttäjien toiminta ja historia.

Evästeet ovat tekstitiedostoja, jotka sisältävät pieniä tietoja selaimet tallentavat käyttäjän laitteelle. Niitä käytetään yleisesti todennustietojen ja muiden henkilökohtaisten käyttäjätietojen tallentamiseen, jolloin verkkosovellukset voivat ylläpitää käyttäjäistuntoja useiden selainistuntojen välillä.

Toisaalta, istunnon tallennustila – samanlainen kuin paikallinen tallennus-on nykyaikaisten selaimien tarjoama asiakaspuolen tallennusmekanismi. Toisin kuin evästeet, se on rajoitettu tiettyyn selausistuntoon ja käytettävissä vain samassa välilehdessä tai ikkunassa. Istuntotallennus tarjoaa yksinkertaisen ja selkeän tavan tallentaa istuntokohtaisia ​​tietoja verkkosovelluksille.

Sekä evästeillä että istuntotallennuksella on ratkaiseva rooli käyttäjän istuntotietojen hallinnassa. Evästeet ovat hyviä tilanteissa, joissa vaaditaan tietojen pysyvyyttä useiden istuntojen aikana. Sitä vastoin istunnon tallennus on edullinen, kun haluat eristää tiedot yhden selausistunnon sisällä, mikä tarjoaa kevyen ja erityisen tallennusvaihtoehdon.

Katsotaanpa nyt, kuinka käsitellä käyttäjän istuntotietoja, keskittyen erityisesti todennustietojen tallentamiseen evästeiden ja istunnon tallennustilan avulla.

Luo React-projekti

Aloita perustaa React-projekti Viten avulla. Asenna seuraavaksi nämä paketit projektiisi.

npm asenna js-cookie react-router-dom

Ihannetapauksessa, kun käyttäjä kirjautuu sisään ja hänen tunnistetiedot on todennettu onnistuneesti taustatodennussovellusliittymällä, evästeet ja istunnon tallennus tallentavat todennustunnuksia, istuntotunnisteita tai mitä tahansa muuta asiaankuuluvaa dataa käyttäjän aikana istunto.

Nämä tunnukset tai tunnisteet sekä käyttäjän selaimeen tallennetut lisätiedot ovat automaattisesti sisällytetään myöhemmissä palvelimelle lähetettyihin varmennuspyyntöihin, ennen kuin käyttäjä voi käyttää suojattuja resursseja.

Tällä tavalla käyttäjän istunto jatkuu useissa pyynnöissä, mikä varmistaa, että he ovat saumattomasti vuorovaikutuksessa sovelluksen kanssa tarvitsematta todentaa uudelleen jokaista pyyntöä varten.

Löydät tämän projektin koodin tästä GitHub-arkisto.

Käyttäjän todennusistunnon tietojen hallinta evästeiden avulla

Jos haluat näyttää, kuinka evästeitä käytetään käyttäjien todennustietojen tallentamiseen, siirry eteenpäin ja luo uusi komponentit/Login.jsx tiedosto tiedostoon src hakemistosta. Lisää tähän tiedostoon seuraava koodi.

1. Tee seuraavat tuonnit.

   tuonti { useState } alkaen'reagoi';
   tuonti { useNavigate } alkaen"react-router-dom";
   tuonti Keksit alkaen"js-cookie";

2. Luo toiminnallinen komponentti ja lisää JSX-elementtejä kirjautumislomakkeeseen.

   konst Kirjautuminen = () => {
   konst [käyttäjänimi, setUsername] = useState('');
   konst [salasana, setPassword] = useState('');
   palata (
   
   
   
    tyyppi="teksti"
    paikkamerkki="Käyttäjänimi"
    arvo={käyttäjänimi}
    onChange={(e) => setUsername (e.target.value)}
    />
    tyyppi="Salasana"
    paikkamerkki="Salasana"
    arvo={salasana}
    onChange={(e) => setPassword (e.target.value)}
    />
   "Lähetä">Kirjaudu sisään</button>
    </form>
    );
   };
   viedäoletuksena Kirjaudu sisään;

Koska meillä ei ole taustasovellusliittymää käyttäjien tunnistetietojen todentamiseen, luomme toiminnon, joka tarkistaa käyttäjän kirjautumislomakkeeseen syöttämät tiedot testikäyttäjän tunnistetiedoilla. Lisää toiminnallisen komponentin sisään seuraava koodi.

konst testAuthData = {
 käyttäjätunnus: 'testata',
 Salasana: 'testata',
 }; 
konst authenticateUser = (Käyttäjänimi Salasana) => {
jos (käyttäjänimi testAuthData.username && salasana testAuthData.password) { 
konst userData = {
 käyttäjätunnus,
 Salasana,
 };
konst päättymisaika = UusiPäivämäärä(UusiPäivämäärä().getTime() + 60000);
 Cookies.set('auth', JSON.stringify (käyttäjätiedot), { päättyy: expirationTime });
palatatotta;
 }
palataväärä;
 };
konst handleLogin = (e) => {
 e.preventDefault();
konst isAuthenticated = authenticateUser (käyttäjätunnus, salasana);
jos (on Authenticated) {
 navigoida('/suojattu');
 } muu {
// Näytä virheilmoitus tai suorita muita toimintoja epäonnistuneen todennuksen varalta
 }
 };

Sisällä autentikoidaKäyttäjä toiminto, se tarkistaa, vastaavatko annettu käyttäjätunnus ja salasana testitodennustietoja. Jos tunnistetiedot täsmäävät, se luo a käyttäjätiedot objekti käyttäjätunnuksella ja salasanalla. Sitten se asettaa evästeelle vanhenemisajan ja tallentaa sen käyttäjätiedot evästeessä nimeltä tod käyttämällä Cookies.set menetelmä.

Onnistuneen todennuksen jälkeen käyttäjä uudelleenohjaa suojatulle sivulle, koska hänellä on oikeus käyttää suojattuja resursseja. Tallentamalla todennustiedot evästeeseen muodostat aktiivisen käyttäjäistunnon, jolloin myöhemmät pyynnöt voivat sisällyttää todennustiedot automaattisesti.

Tämän käyttäjän istuntodatan avulla palvelinkoodi voi vahvistaa käyttäjän henkilöllisyyden ja valtuuttaa pääsyn käyttöoikeuksiin ilman, että käyttäjän tarvitsee todentaa uudelleen jokaisessa pyynnössä.

Päivitä App.jsx-tiedosto

Tee muutoksia kohtaan App.jsx tiedosto käsittelemään käyttäjän reititystä onnistuneen todennuksen jälkeen

tuonti { BrowserRouter, Route, Routes, useNavigate } alkaen"react-router-dom";
tuonti Keksit alkaen"js-cookie";
tuonti Kirjaudu sisään alkaen'./components/Login';
konst Suojattu sivu = ({ ...lepoa }) => {
konst isAuthenticated = !!Cookies.get('auth');
konst navigoi = useNavigate();
konst handleLogout = () => { 
 Cookies.remove('auth');
 navigoida('/Kirjaudu sisään'); 
 };
jos (!isAuthenticated) {
 navigoida('/Kirjaudu sisään'); 
palatatyhjä; // Palauta nolla estääksesi hahmontamasta mitään muuta
 }
palata (



Fonttikoko: "24px", väri: 'sininen' }}>Hei, maailma!</h1>
marginTop: "10px" }} onClick={handleLogout}>
 Kirjautua ulos
 </button>
 </div>
 );
};


konst Sovellus = () => {
palata (


"/protected/*" element={} />
"/Kirjaudu sisään" element={} />
 </Routes>
 </BrowserRouter>
 );
};
viedäoletuksena Sovellus;

Yllä oleva koodi määrittää tarvittavat komponentit ja reitityslogiikan. Se sisältää uloskirjautumispainikkeen, jota painettaessa todennuseväste poistetaan ja käyttäjä ohjataan kirjautumissivulle.

Lisäksi se varmistaa todennusevästeen olemassaolon ja ohjaa käyttäjät kirjautumissivulle, jos se puuttuu. Jos eväste kuitenkin on olemassa, Suojattu sivu komponentti tekee sivun, joka on yksinomaan todennettujen käyttäjien käytettävissä.

Suorita lopuksi alla oleva komento käynnistääksesi kehityspalvelimen sovelluksen testaamiseksi.

npm run dev

Siirry selaimessasi kohtaan http://127.0.0.1:5173/login, ja anna testitodennustiedot. Onnistuneen sisäänkirjautumisen jälkeen luodaan uusi eväste, joka sisältää istuntotiedot, jotka sisältävät testitodennustiedot.

Kun eväste vanhenee tai kun napsautat uloskirjautumispainiketta, eväste poistetaan. Tämä toiminto lopettaa aktiivisen käyttäjäistunnon ja kirjaa sinut ulos.

Käyttäjän todennustietojen tallentaminen istunnon tallennustilan avulla

Sekä istunnon tallennus että evästeet toimivat samalla tavalla. Tarvittavien tietojen tallentamiseksi selaimen istuntomuistiin voit käyttää sessionStorage.setItem menetelmä.

 sessionStorage.setItem('auth', JSON.stringify (käyttäjätiedot));

Lisäämällä yllä olevan lauseen sisään autentikoidaKäyttäjä toimintoa Kirjaudu sisään komponentti, voit tallentaa käyttäjän todennustiedot selaimen istuntomuistiin.

Evästeiden ja istunnon tallennuksen lisäkäyttötapausten tutkiminen

Tässä oppaassa korostettiin, kuinka evästeitä ja istunnon tallennustilaa käytetään käyttäjien todennustietojen tallentamiseen. Evästeet ja istunnon tallennus tarjoavat kuitenkin laajemman valikoiman ominaisuuksia kuin todennustietojen tallentamisen.

Hyödyntämällä näitä ominaisuuksia voit hallita lisää istuntotietoja, mikä johtaa turvallisempaan ja henkilökohtaisempaan käyttökokemukseen.