PricingLoginStart free
React Academy · Lektion

Beskyttede routes og auth guards

Omdirigér brugere uden login til login med wrapper-komponenter eller loader-baserede guards.

Lektion 3 af 413 trin

Beskyttede routes og auth guards er en gratis React Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Hvorfor beskytte ruter?

Nogle sider (dashboard, profil og administration) bør kun være tilgængelige for brugere, der er logget ind. React Router tilbyder to metoder: omsluttende komponenter og loaderbaserede beskyttelser.

Formen på godkendelsestilstanden

Først skal du oprette en godkendelseskontekst, som komponenter kan læse for at se, om brugeren er logget ind.

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

Beskyttelse med en omsluttende komponent

Opret en PrivateRoute-komponent, der kontrollerer godkendelsen og omdirigerer til login, hvis brugeren ikke er godkendt.

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

Bevar URL'en til omdirigering

Gem den URL, som brugeren forsøgte at åbne, så du kan sende brugeren tilbage efter login. 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 });

Loaderbaseret beskyttelse (Data Router)

I Data Router-API'en skal du tilføje et godkendelsestjek til rutens loader. Kast en omdirigering, hvis brugeren ikke er godkendt.

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

Rollebaserede beskyttelser

Udvid beskyttelsen, så den også kontrollerer roller. Omdirigér til en side for manglende adgang, hvis brugeren ikke har den påkrævede rolle.

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

Indlæsningstilstand under godkendelsestjek

Hvis godkendelsestilstanden indlæses asynkront, for eksempel fra en server, skal du vise en indlæsningsindikator, mens tjekket afventer, så login-siden ikke kortvarigt vises.

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

Beskyttelse af flere ruter på én gang

Gruppér alle beskyttede ruter under én PrivateRoute-omslutning, så du ikke gentager beskyttelsen 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åndtering af tokenudløb

Kontrollér tokenets udløb i beskyttelsen eller i en global interceptormekanisme, og log brugeren ud, når tokenet udløber, så brugeren omdirigeres til login.

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

Flow for fornyelse af token

Forsøg at forny tokenet, før du omdirigerer ved 401. Omdirigér kun til login, 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;
}

Bevar godkendelsen efter genindlæsning

Gem godkendelsestokenet i localStorage eller i en HttpOnly-cookie. Ved indlæsning af appen skal du gendanne godkendelsestilstanden, før du gengiver beskyttede ruter.

Hurtigt tjek

Når du bruger en loaderbaseret godkendelsesbeskyttelse i React Router, hvad skal du så kaste for at omdirigere en bruger, der ikke er godkendt?

Besvar den i den interaktive lektion

Opsummering

Beskyt ruter med en PrivateRoute-omslutning, der bruger <Outlet />, eller med en loader, der kaster redirect(). Bevar den tilsigtede URL i navigationstilstanden, håndtér indlæsningstilstande for at undgå korte visninger, og gruppér beskyttede ruter for at undgå gentagelser.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
88
Lektioner
324
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Beskyttede routes og auth guards” gratis?

Ja — hele teksten til “Beskyttede routes og auth guards” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Beskyttede routes og auth guards”?

Omdirigér brugere uden login til login med wrapper-komponenter eller loader-baserede guards. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Beskyttede routes og auth guards”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Indlejrede routes og Outlet-layouts
  2. Loaders og actions (Data Router API)
  3. Beskyttede routes og auth guards
  4. Håndtering af tilstand i URL’ens søgeparametre
← Tilbage til React Academy