Vue Academy · Lezione

Guardie di navigazione

Protegga le route ed esegua logica durante la navigazione con le guardie.

Guardie di navigazione è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.

Che cosa sono le guardie di navigazione?

Le guardie di navigazione consentono di eseguire codice prima, durante o dopo una modifica della route.

Bloccare o reindirizzare la navigazione
Verificare l'autenticazione
Chiedere conferma prima di lasciare una pagina

Tipi di guardie

Esistono tre livelli di guardie:

Le guardie globali vengono eseguite per ogni navigazione
Le guardie per-route vengono eseguite per una specifica route
Le guardie nei componenti vengono eseguite all'interno di un componente

La guardia globale beforeEach

router.beforeEach viene eseguito prima di ogni navigazione. Riceve la route di destinazione e quella corrente.

router.beforeEach((to, from) => {
  console.log("going to", to.path)
  // return true to allow,
  // or a route to redirect
})

Consentire o reindirizzare

In Vue Router 4, restituire un valore per controllare il flusso.

Restituire true o nulla per consentire la navigazione
Restituire false per annullarla
Restituire una posizione di route per reindirizzare

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return { name: "login" }
  }
  return true
})

Campi meta delle route

Associare dati meta personalizzati alle route, come requiresAuth, e leggerli nelle guardie.

const routes = [
  {
    path: "/dashboard",
    component: Dashboard,
    meta: { requiresAuth: true }
  }
]

Una guardia di autenticazione

Un modello comune consiste nel proteggere le route verificando l'autenticazione in una guardia globale.

router.beforeEach((to) => {
  const authed = localStorage.getItem("token")
  if (to.meta.requiresAuth && !authed) {
    return { name: "login", query: { redirect: to.fullPath } }
  }
})

beforeEnter per una route

beforeEnter protegge una singola route direttamente nella sua definizione.

const routes = [
  {
    path: "/admin",
    component: Admin,
    beforeEnter: (to, from) => {
      return isAdmin() ? true : { name: "home" }
    }
  }
]

Guardie nei componenti

I componenti possono definire le proprie guardie. onBeforeRouteLeave viene eseguito quando si lascia una route.

import { onBeforeRouteLeave } from "vue-router"

onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    return window.confirm("Leave without saving?")
  }
})

onBeforeRouteUpdate

onBeforeRouteUpdate viene eseguito quando cambia la route, ma lo stesso componente viene riutilizzato, ad esempio dopo una modifica del parametro.

import { onBeforeRouteUpdate } from "vue-router"

onBeforeRouteUpdate((to) => {
  loadUser(to.params.id)
})

Il callback next (stile classico)

Il codice meno recente utilizza un terzo argomento, next, per controllare la navigazione. Oggi è preferibile restituire un valore.

// Classic style with next()
router.beforeEach((to, from, next) => {
  if (canAccess(to)) {
    next()         // proceed
  } else {
    next("/login") // redirect
  }
})

Valore restituito o next()

Due stili con lo stesso obiettivo:

Restituire un valore (moderno, più pulito): true, false o una posizione
Chiamare next() (classico): procedere o reindirizzare

Non combinarli nella stessa guardia. Per il nuovo codice è consigliato lo stile basato sul valore restituito.

Verifica rapida

Verificare la propria comprensione delle guardie di navigazione.

Riepilogo: guardie di navigazione

Ha imparato a controllare la navigazione:

La guardia globale beforeEach viene eseguita per ogni route
Restituire true per consentire, false per annullare o una posizione per reindirizzare
I campi meta come requiresAuth consentono di gestire i controlli di autenticazione
beforeEnter protegge una singola route
Le guardie nei componenti, come onBeforeRouteLeave, gestiscono l'uscita

Ha completato il corso introduttivo su Vue.js!

Domande Frequenti

La lezione «Guardie di navigazione» è gratuita?

Sì — il testo completo di «Guardie di navigazione» è 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 Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.

Cosa imparerò in «Guardie di navigazione»?

Protegga le route ed esegua logica durante la navigazione con le guardie. Eserciti Vue 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 Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue 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 3.

Quanto tempo richiede la lezione «Guardie di navigazione»?

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 Vue Academy?

Sì. Ogni lezione Vue 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

← Torna a Vue Academy