PricingLoginStart free
React Academy · Lezione

Route protette e guard di autenticazione

Reindirizzi gli utenti non autenticati al login utilizzando componenti wrapper o guard basati sui loader.

Lezione 3 di 413 passaggi

Route protette e guard di autenticazione è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Perché proteggere le route?

Alcune pagine (dashboard, profilo, amministrazione) dovrebbero essere accessibili solo agli utenti autenticati. React Router offre due approcci: componenti wrapper e guard basati sui loader.

Struttura dello stato di autenticazione

Per prima cosa, configuri un contesto di autenticazione che i componenti possano leggere per sapere se l'utente ha effettuato l'accesso.

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

Guard con componente wrapper

Crei un componente PrivateRoute che controlli l'autenticazione e reindirizzi alla pagina di accesso se l'utente non è autenticato.

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

Conservazione dell'URL di reindirizzamento

Memorizzi l'URL richiesto per poter rimandare l'utente alla pagina precedente dopo l'accesso. Lo passi tramite state nel componente 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 });

Guard basato su loader (Data Router)

Nel Data Router API, aggiunga un controllo di autenticazione al loader della route. Lanci un redirect se l'utente non è autenticato.

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

Guard basati sui ruoli

Estenda il guard in modo da controllare i ruoli. Reindirizzi a una pagina di accesso negato se l'utente non dispone del ruolo richiesto.

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

Stato di caricamento durante il controllo di autenticazione

Se lo stato di autenticazione viene caricato in modo asincrono (ad esempio da un server), mostri un indicatore di caricamento mentre il controllo è in attesa, per evitare la comparsa momentanea della pagina di accesso.

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

Protezione simultanea di più route

Raggruppi tutte le route protette sotto un unico wrapper PrivateRoute, così non dovrà ripetere il guard individualmente per ogni route.

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

Gestione della scadenza del token

Controlli la scadenza del token all'interno del guard o in un interceptor globale e disconnetta l'utente quando il token scade, reindirizzandolo alla pagina di accesso.

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

Flusso del token di aggiornamento

Prima di reindirizzare dopo un 401, tenti di aggiornare il token. Reindirizzi alla pagina di accesso solo se anche l'aggiornamento non riesce.

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

Persistenza dell'autenticazione dopo i ricaricamenti

Memorizzi il token di autenticazione in localStorage o in un cookie HttpOnly. Al caricamento dell'app, ripristini lo stato di autenticazione prima di eseguire il rendering delle route protette.

Verifica rapida

Quando usa un guard di autenticazione basato su loader in React Router, che cosa deve lanciare per reindirizzare un utente non autenticato?

Rispondi nella lezione interattiva

Riepilogo

Protegga le route con un wrapper PrivateRoute che usa <Outlet /> oppure con un loader che lancia redirect(). Conservi l'URL richiesto nello stato di navigazione, gestisca gli stati di caricamento per evitare sfarfallii e raggruppi le route protette per evitare duplicazioni.

Gratis per iniziare

Impara React con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi
88
Lezioni
324
Inizia a imparare gratisVisualizza il corso completo

Domande Frequenti

La lezione «Route protette e guard di autenticazione» è gratuita?

Sì — il testo completo di «Route protette e guard di autenticazione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Route protette e guard di autenticazione»?

Reindirizzi gli utenti non autenticati al login utilizzando componenti wrapper o guard basati sui loader. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Route protette e guard di autenticazione»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Route annidate e layout con Outlet
  2. Loader e action (API Data Router)
  3. Route protette e guard di autenticazione
  4. Gestione dello stato nei parametri di ricerca dell'URL
← Torna a React Academy