Ebben a példában egy tokent fogunk menteni, beolvasni. Hozzunk létre egy Home, Oldal1, Oldal2 komponenst! Készítsünk navigációt, és egy beviteli mezőt a tokennek! Ha van token, a beviteli mező és gomb tünjön el, helyettük egy kilépés menüpont jelenjen meg!
A tokent a local storage-ban tároljuk el. Minden oldalon ellenőrizzük a token meglétét, de nincs validálás, azt a backend végzi.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import React, { createContext, useState, useContext, useEffect } from 'react'; const AuthContext = createContext(); export const AuthProvider = ({ children }) => { const [token, setTokenState] = useState(() => { try { return localStorage.getItem('token') || ''; } catch (e) { return ''; } }); const setToken = (value) => { try { if (value) localStorage.setItem('token', value); else localStorage.removeItem('token'); } catch (e) {} setTokenState(value); }; const logout = () => setToken(''); useEffect(() => { const onStorage = (e) => { if (e.key === 'token') setTokenState(e.newValue || ''); }; window.addEventListener('storage', onStorage); return () => window.removeEventListener('storage', onStorage); }, []); return ( <AuthContext.Provider value={{ token, setToken, logout }}> {children} </AuthContext.Provider> ); }; export const useAuth = () => useContext(AuthContext); |
Inicializálás a localStorage-ból
A useState itt egy úgynevezett lazy initializer függvényt kap:
|
1 2 3 |
const [token, setTokenState] = useState(() => { return localStorage.getItem('token') || ''; }); |
A useContext a React egyik beépített Hook-ja, amely lehetővé teszi az adatok (állapotok, függvények, objektumok) átadását a komponensfán keresztül anélkül, hogy azokat manuálisan, szintről szintre kellene továbbadni („prop drilling”). Képzeld el úgy, mint egy rádióadót: a Context az adótorony, a useContext pedig a rádiókészülék, amivel bárki rácsatlakozhat az adásra, függetlenül attól, milyen messze van a toronytól. A useContext az a „láthatatlan csatorna”, ami összeköti a beviteli mezőt (ahol a tokent megadjuk) és az oldalakat (ahol a tokent kiírjuk), anélkül, hogy a kettő között kézzel kellene küldözgetni az adatot. Az AuthContext olyan, mint egy központi raktár. Itt határozzuk meg, hogy mit fogunk tárolni (tokent, bejelentkezési és kijelentkezési funkciókat).
Az AuthProvider komponens a kódban a postás szerepét tölti be. Ő felel azért, hogy az információ eljusson mindenkihez. Amit a value prop-ba teszel, azt minden „gyerek” látni fogja. Tehát az App.jsx-ben minden benne van. (teljes fájl a git reposítoryban )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function App() { return ( <AuthProvider> <Router> <div className="app-container"> <Header /> <main className="main-content"> <Routes> <Route path="/" element={<Home />} /> <Route path="/oldal1" element={<Oldal1 />} /> <Route path="/oldal2" element={<Oldal2 />} /> </Routes> </main> <Footer /> </div> </Router> </AuthProvider> ); } |
Amikor valamelyik komponensnek (például a Header-nek) szüksége van a tokenre, a useContext segítségével „belehallgat”:
|
1 2 |
// Header.jsx const { token, setToken } = useAuth(); // A háttérben ez: useContext(AuthContext) |
Az alkalmazás indulásakor (vagy frissítésekor) rögtön ellenőrzi, hogy van-e már elmentett token a böngészőben. Ha van, azzal indul az állapot, így a felhasználónak nem kell minden frissítésnél újra beírnia.
A setToken függvény két dolgot csinál egyszerre:
- ha kap értéket, elmenti a localStorage-ba. Ha üres (pl. kijelentkezés), törli onnan.
- állapotfrissítés: Frissíti a React állapotot (setTokenState), amitől az összes komponens újrarajzolódik, ahol használják a tokent.
Storage esemény figyelő
|
1 2 3 4 5 6 7 |
useEffect(() => { const onStorage = (e) => { if (e.key === 'token') setTokenState(e.newValue || ''); }; window.addEventListener('storage', onStorage); return () => window.removeEventListener('storage', onStorage); }, []); |
Ha a felhasználónak több fülön is meg van nyitva az oldal, és az egyiken kilép (vagy tokent vált), a storage esemény segítségével a többi fül is azonnal észleli a változást és frissíti magát.
Cleanup: A removeEventListener biztosítja, hogy ne maradjanak „szemét” eseményfigyelők, amikor a komponens megsemmisül.
Hogyan működik ez a gyakorlatban?
- AuthProvider: Ő a „gazda”. Körbeöleli az egész alkalmazást, és biztosítja a „távvezetéket” (Context).
- Consumer (useAuth): Bármelyik komponens (pl. a Header vagy egy védett oldal) rá tud csatlakozni erre a vezetékre a useAuth() hook segítségével.
Működés:
- Beírod a tokent a Headerben → Meghívódik a setToken.
- A token bekerül a localStorage-ba ÉS a React állapotba.
- Minden oldal, ami kiírja a tokent, azonnal frissül.