React Academy · Oppitunti

Suojatut reitit ja autentikointivartijat

Uudelleenohjatkaa kirjautumattomat käyttäjät kirjautumissivulle wrapper-komponenteilla tai loader-pohjaisilla vartijoilla.

Oppitunti 3/413 vaihetta

Suojatut reitit ja autentikointivartijat on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Miksi reitit suojataan?

Joidenkin sivujen, kuten hallintapaneelin, profiilin ja ylläpidon, tulee olla vain todennettujen käyttäjien käytettävissä. React Router tarjoaa tähän kaksi lähestymistapaa: wrapper-komponentit ja loader-pohjaiset suojaukset.

Todennustilan rakenne

Määritä ensin todennuskonteksti, josta komponentit voivat tarkistaa, onko käyttäjä kirjautunut sisään.

const AuthContext = React.createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const login = async (creds) => { const u = await apiLogin(creds); setUser(u); };
  const logout = () => setUser(null);
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

Suojaus wrapper-komponentilla

Luo PrivateRoute-komponentti, joka tarkistaa todennuksen ja uudelleenohjaa kirjautumissivulle, jos käyttäjää ei ole todennettu.

import { Navigate, Outlet } from 'react-router-dom';

function PrivateRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

// Usage in router:
{ element: <PrivateRoute />, children: [
  { path: '/dashboard', element: <Dashboard /> },
]}

Uudelleenohjausosoitteen säilyttäminen

Tallenna käyttäjän yrittämä URL-osoite, jotta voit palauttaa käyttäjän sinne kirjautumisen jälkeen. Välitä se Navigate-komponentin state-propin kautta.

function PrivateRoute() {
  const { user } = useAuth();
  const location = useLocation();
  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return <Outlet />;
}

// In login handler:
const location = useLocation();
const from = location.state?.from?.pathname || '/';
navigate(from, { replace: true });

Loader-pohjainen suojaus (Data Router)

Lisää Data Router -rajapinnassa todennuksen tarkistus reitin loader-funktioon. Heitä redirect, jos käyttäjää ei ole todennettu.

import { redirect } from 'react-router-dom';

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token) throw redirect('/login');
  return token;
}

const router = createBrowserRouter([
  {
    path: '/dashboard',
    loader: requireAuth,
    element: <Dashboard />,
  },
]);

Roolipohjaiset suojaukset

Laajenna suojausta tarkistamaan myös käyttäjän roolit. Uudelleenohjaa käyttäjä luvattoman käytön sivulle, jos häneltä puuttuu vaadittu rooli.

function AdminRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  if (user.role !== 'admin') return <Navigate to="/unauthorized" replace />;
  return <Outlet />;
}

Lataustila todennuksen tarkistuksen aikana

Jos todennustila ladataan asynkronisesti esimerkiksi palvelimelta, näytä latausilmaisin tarkistuksen ajan, jotta kirjautumissivu ei ehdi välähtää näkyviin.

function PrivateRoute() {
  const { user, isLoading } = useAuth();
  if (isLoading) return <Spinner />;
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

Useiden reittien suojaaminen kerralla

Ryhmittele kaikki suojatut reitit yhden PrivateRoute-wrapperin alle, jotta suojausta ei tarvitse toistaa jokaisella reitillä erikseen.

const router = createBrowserRouter([
  { path: '/login', element: <Login /> },
  {
    element: <PrivateRoute />,
    children: [
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/profile', element: <Profile /> },
      { path: '/settings', element: <Settings /> },
    ],
  },
]);

Tokenin vanhenemisen käsittely

Tarkista tokenin vanheneminen suojauksessa tai globaalissa interceptorissa ja kirjaa käyttäjä ulos tokenin vanhentuessa sekä uudelleenohjaa hänet kirjautumissivulle.

function isTokenValid(token) {
  const payload = JSON.parse(atob(token.split('.')[1]));
  return payload.exp * 1000 > Date.now();
}

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token || !isTokenValid(token)) throw redirect('/login');
  return token;
}

Refresh token -prosessi

Yritä päivittää token ennen uudelleenohjausta 401-virheen jälkeen. Uudelleenohjaa käyttäjä kirjautumissivulle vasta, jos myös päivitys epäonnistuu.

async function requireAuth() {
  let token = localStorage.getItem('token');
  if (!token || isExpired(token)) {
    token = await refreshToken();
    if (!token) throw redirect('/login');
    localStorage.setItem('token', token);
  }
  return token;
}

Todennuksen säilyttäminen uudelleenlatausten yli

Tallenna todennustoken localStorage-tallennustilaan tai HttpOnly-evästeeseen. Sovelluksen latautuessa palauta todennustila ennen suojattujen reittien renderöintiä.

Pikatarkistus

Mitä loader-pohjaisen todennussuojauksen tulee heittää React Routerissa, jotta todenneton käyttäjä ohjataan uudelleen?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Suojaa reitit PrivateRoute-wrapperilla, joka käyttää <Outlet />-komponenttia, tai loaderilla, joka heittää redirect()-uudelleenohjauksen. Säilytä aiottu URL-osoite navigointitilassa, käsittele lataustilat välähdysten estämiseksi ja ryhmittele suojatut reitit päällekkäisen koodin välttämiseksi.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Suojatut reitit ja autentikointivartijat” ilmainen?

Kyllä – oppitunnin ”Suojatut reitit ja autentikointivartijat” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Suojatut reitit ja autentikointivartijat”?

Uudelleenohjatkaa kirjautumattomat käyttäjät kirjautumissivulle wrapper-komponenteilla tai loader-pohjaisilla vartijoilla. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Suojatut reitit ja autentikointivartijat”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Sisäkkäiset reitit ja Outlet-asettelut
Loaderit ja actionit (Data Router API)
Suojatut reitit ja autentikointivartijat
Tilan hallinta URL:n hakuparemetreissa

← Takaisin: React Academy