React Academy · leksjon

Beskyttede ruter og auth guards

Omdiriger uautentiserte brukere til innlogging ved hjelp av wrapper-komponenter eller loader-baserte guards.

Leksjon 3 av 413 trinn

Beskyttede ruter og auth guards er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Hvorfor beskytte ruter?

Noen sider (dashboard, profil og admin) bør bare være tilgjengelige for autentiserte brukere. React Router tilbyr to tilnærminger: wrapper-komponenter og loader-baserte tilgangskontroller.

Struktur for auth-tilstand

Start med å opprette en auth-kontekst som komponenter kan lese for å vite om brukeren er logget inn.

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);

Tilgangskontroll med wrapper-komponent

Opprett en PrivateRoute-komponent som kontrollerer autentisering og omdirigerer til innlogging hvis brukeren ikke er autentisert.

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 /> },
]}

Bevare URL-en for omdirigering

Lagre URL-en brukeren forsøkte å åpne, slik at De kan sende brukeren tilbake etter innlogging. Send den via state på Navigate-komponenten.

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-basert tilgangskontroll (Data Router)

I Data Router-API-et legger De til en autentiseringskontroll i routens loader. Kast en redirect hvis brukeren ikke er autentisert.

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 />,
  },
]);

Rollebaserte tilgangskontroller

Utvid tilgangskontrollen til å sjekke roller. Omdiriger til en side for manglende tilgang hvis brukeren ikke har den nødvendige rollen.

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

Lastetilstand under autentiseringskontroll

Hvis auth-tilstanden lastes inn asynkront, for eksempel fra en server, viser De en lastespinner mens kontrollen pågår, for å unngå at innloggingssiden blinker frem.

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

Beskytte flere ruter samtidig

Gruppér alle beskyttede ruter under én PrivateRoute-wrapper, slik at De slipper å gjenta tilgangskontrollen for hver enkelt rute.

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

Håndtere utløpte tokens

Kontroller tokenets utløp i tilgangskontrollen eller i en global interceptor, og logg brukeren ut når tokenet utløper. Omdiriger deretter til innlogging.

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;
}

Flyt for refresh token

Forsøk å fornye tokenet før De omdirigerer ved 401. Omdiriger bare til innlogging hvis fornyelsen også mislykkes.

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;
}

Bevare auth på tvers av omlastinger

Lagre auth-tokenet i localStorage eller en HttpOnly-cookie. Når appen lastes inn, gjenopprettes auth-tilstanden før beskyttede ruter gjengis.

Kunnskapssjekk

Hva bør De kaste når De bruker en loader-basert autentiseringskontroll i React Router, for å omdirigere en bruker som ikke er autentisert?

Besvar den i den interaktive leksjonen

Oppsummering

Beskytt ruter med en PrivateRoute-wrapper som bruker <Outlet />, eller med en loader som kaster redirect(). Bevar den tiltenkte URL-en i navigasjonstilstanden, håndter lastetilstander for å unngå blinkende innhold, og grupper beskyttede ruter for å unngå duplisering.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Beskyttede ruter og auth guards» gratis?

Ja – hele teksten i «Beskyttede ruter og auth guards» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Beskyttede ruter og auth guards»?

Omdiriger uautentiserte brukere til innlogging ved hjelp av wrapper-komponenter eller loader-baserte guards. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Beskyttede ruter og auth guards»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Academy