Guardas de navegação
Proteja rotas e execute lógica durante a navegação com guardas.
Guardas de navegação é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.
O que são guardas de navegação?
Guardas de navegação permitem executar código antes, durante ou depois de uma alteração de rota.
- Bloquear ou redirecionar a navegação
- Verificar a autenticação
- Confirmar antes de sair de uma página
Tipos de guardas
Há três níveis de guardas:
- Guardas globais são executadas em todas as navegações
- Guardas por rota são executadas para uma rota específica
- Guardas dentro do componente são executadas dentro de um componente
A guarda global beforeEach
router.beforeEach é executada antes de cada navegação. Ela recebe as rotas de destino e atual.
router.beforeEach((to, from) => {
console.log("going to", to.path)
// return true to allow,
// or a route to redirect
})Permitindo ou redirecionando
No Vue Router 4, retorne um valor para controlar o fluxo.
- Retorne true ou não retorne nada para permitir
- Retorne false para cancelar
- Retorne uma localização de rota para redirecionar
router.beforeEach((to) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
return { name: "login" }
}
return true
})Campos de metadados da rota
Anexe dados personalizados de metadados às rotas, como requiresAuth, e leia-os nas guardas.
const routes = [
{
path: "/dashboard",
component: Dashboard,
meta: { requiresAuth: true }
}
]Uma guarda de autenticação
Um padrão comum é proteger as rotas verificando a autenticação em uma guarda global.
router.beforeEach((to) => {
const authed = localStorage.getItem("token")
if (to.meta.requiresAuth && !authed) {
return { name: "login", query: { redirect: to.fullPath } }
}
})beforeEnter por rota
beforeEnter protege uma única rota diretamente na definição dela.
const routes = [
{
path: "/admin",
component: Admin,
beforeEnter: (to, from) => {
return isAdmin() ? true : { name: "home" }
}
}
]Guardas dentro do componente
Os componentes podem definir suas próprias guardas. onBeforeRouteLeave é executada ao navegar para fora do componente.
import { onBeforeRouteLeave } from "vue-router"
onBeforeRouteLeave((to, from) => {
if (hasUnsavedChanges.value) {
return window.confirm("Leave without saving?")
}
})onBeforeRouteUpdate
onBeforeRouteUpdate é executada quando a rota muda, mas o mesmo componente é reutilizado, por exemplo, após uma alteração de parâmetro.
import { onBeforeRouteUpdate } from "vue-router"
onBeforeRouteUpdate((to) => {
loadUser(to.params.id)
})A função de retorno next no estilo clássico
Códigos mais antigos usam um terceiro argumento, next, para controlar a navegação. Atualmente, é preferível retornar um valor.
// Classic style with next()
router.beforeEach((to, from, next) => {
if (canAccess(to)) {
next() // proceed
} else {
next("/login") // redirect
}
})Valor de retorno versus next()
Dois estilos, o mesmo objetivo:
- Retornar um valor (moderno e mais limpo): true, false ou uma localização
- Chamar next() (clássico): prosseguir ou redirecionar
Não misture os dois estilos na mesma guarda. O estilo com retorno é recomendado para códigos novos.
Verificação rápida
Teste sua compreensão sobre guardas de navegação.
Recapitulação: guardas de navegação
Você aprendeu a controlar a navegação:
- A guarda global beforeEach é executada para cada rota
- Retorne true para permitir, false para cancelar ou uma localização para redirecionar
- Campos de metadados como requiresAuth orientam as verificações de autenticação
- beforeEnter protege uma única rota
- Guardas dentro do componente, como onBeforeRouteLeave, cuidam da saída
Você concluiu o curso básico de Vue.js!
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Guardas de navegação” é grátis?
Sim — o texto completo de “Guardas de navegação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.
O que vou aprender em “Guardas de navegação”?
Proteja rotas e execute lógica durante a navegação com guardas. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.
Quanto tempo leva a aula “Guardas de navegação”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Configuração do Vue Router
- Rotas aninhadas e dinâmicas
- Guardas de navegação