0Pricing
React Academy · Lekcja

Chronione trasy i strażnicy uwierzytelniania

Przekierowywanie nieuwierzytelnionych użytkowników do logowania za pomocą komponentów opakowujących lub strażników opartych na loaderach.

Chronione trasy i strażnicy uwierzytelniania to bezpłatna lekcja React Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Dlaczego chronić trasy

Niektóre strony (panel, profil i panel administratora) powinny być dostępne wyłącznie dla uwierzytelnionych użytkowników. React Router udostępnia dwa podejścia: komponenty opakowujące oraz zabezpieczenia oparte na loaderach.

Kształt stanu uwierzytelniania

Najpierw utwórz kontekst uwierzytelniania, z którego komponenty będą mogły odczytać, czy użytkownik jest zalogowany.

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

Zabezpieczenie za pomocą komponentu opakowującego

Utwórz komponent PrivateRoute, który sprawdza uwierzytelnienie i przekierowuje użytkownika do logowania, jeśli nie jest on uwierzytelniony.

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

Zachowywanie adresu przekierowania

Zapisz adres URL, który użytkownik próbował otworzyć, aby po zalogowaniu można było odesłać go z powrotem. Przekaż go za pomocą właściwości state komponentu Navigate.

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

Zabezpieczenie oparte na loaderze (Data Router)

W Data Router API dodaj sprawdzanie uwierzytelnienia do właściwości loader trasy. Rzuć przekierowanie, jeśli użytkownik nie jest uwierzytelniony.

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

Zabezpieczenia oparte na rolach

Rozszerz zabezpieczenie o sprawdzanie ról. Przekieruj użytkownika na stronę braku uprawnień, jeśli nie ma wymaganej roli.

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

Stan ładowania podczas sprawdzania uwierzytelnienia

Jeśli stan uwierzytelnienia jest ładowany asynchronicznie (np. z serwera), wyświetl wskaźnik ładowania, gdy sprawdzanie jest w toku, aby uniknąć mignięcia strony logowania.

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

Jednoczesne zabezpieczanie wielu tras

Umieść wszystkie chronione trasy we wspólnym komponencie opakowującym PrivateRoute, aby nie powtarzać zabezpieczenia dla każdej trasy osobno.

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

Obsługa wygaśnięcia tokenu

Sprawdzaj wygaśnięcie tokenu w zabezpieczeniu lub globalnym interceptorze i wyloguj użytkownika po wygaśnięciu tokenu, przekierowując go do logowania.

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

Przepływ odświeżania tokenu

Przed przekierowaniem po błędzie 401 spróbuj odświeżyć token. Przekieruj użytkownika do logowania tylko wtedy, gdy odświeżenie również się nie powiedzie.

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

Zachowywanie uwierzytelnienia po przeładowaniu

Przechowuj token uwierzytelniający w localStorage lub w pliku cookie HttpOnly. Podczas uruchamiania aplikacji odtwórz stan uwierzytelnienia przed renderowaniem chronionych tras.

Szybki sprawdzian

Podczas korzystania z zabezpieczenia uwierzytelniania opartego na loaderze w React Router co należy rzucić, aby przekierować nieuwierzytelnionego użytkownika?

Podsumowanie

Chroń trasy za pomocą opakowującego komponentu PrivateRoute używającego <Outlet /> albo loadera, który rzuca redirect(). Zachowuj zamierzony adres URL w stanie nawigacji, obsługuj stany ładowania, aby uniknąć mignięć, i grupuj chronione trasy, aby uniknąć powielania kodu.

Często zadawane pytania

Czy lekcja „Chronione trasy i strażnicy uwierzytelniania” jest bezpłatna?

Tak — pełny tekst „Chronione trasy i strażnicy uwierzytelniania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Chronione trasy i strażnicy uwierzytelniania”?

Przekierowywanie nieuwierzytelnionych użytkowników do logowania za pomocą komponentów opakowujących lub strażników opartych na loaderach. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Chronione trasy i strażnicy uwierzytelniania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Zagnieżdżone trasy i układy Outlet
  2. Loadery i akcje (Data Router API)
  3. Chronione trasy i strażnicy uwierzytelniania
  4. Zarządzanie stanem w parametrach wyszukiwania URL
← Powrót do React Academy