🚀 Capítulo 15: Guardas - Segurança
🎯 Objetivo da Aula
Ao final desta aula, você saberá como proteger rotas no Vue.js usando os Navigation Guards (Guardas de Navegação) do Vue Router, impedindo o acesso a páginas secretas por usuários não autorizados.
🏢 O Cenário Prático (Seu Desafio)
A rota do Quartel General contém planos secretos! Seu desafio hoje é criar um guarda imperial (Navigation Guard) que verifique se o usuário tem a credencial de “Mestre Jedi” antes de permitir que a rota mude!
🧠 Fundamentos: A Teoria Traduzida
No Vue Router, podemos colocar um “Guarda” na porta de entrada das rotas usando a função beforeEach. Essa função roda antes de qualquer mudança de página.
Ela recebe três argumentos:
to: Para onde o usuário quer ir.from: De onde ele está vindo.next: A função que autoriza ou não a viagem.next(): Deixa passar.next('/login'): Redireciona para outra página.
📖 Exemplo Guiado: Criando o Guarda
Geralmente essa configuração fica no arquivo router/index.js. Vamos ver como ela funciona:
🛠️ Passo a Passo
import { createRouter, createWebHistory } from 'vue-router';
const isJedi = false; // Simulação de usuário logado
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Painel },
{ path: '/qg', component: QGSecreto }
]
});
// O Guarda de Navegação
router.beforeEach((to, from, next) => {
// Se o usuário quer ir para o QG e NÃO é Jedi...
if (to.path === '/qg' && !isJedi) {
alert('Acesso negado! Apenas Mestres Jedi.');
next('/'); // Manda de volta para o Painel
} else {
next(); // Deixa passar
}
});
export default router;🕹️ Como Executar e Testar no VS Code
- Em um projeto real com Vue Router, ao tentar clicar no link do QG com
isJedi = false, você verá o alerta e a página não mudará!
🛠️ Prática Obrigatória 1
Mude a variável isJedi para true no código e tente acessar a rota do QG novamente para validar se o guarda deixa passar.
🛠️ Prática Obrigatória 2
Em vez de verificar a URL digitada (to.path === '/qg'), os desenvolvedores Vue preferem usar propriedades meta nas rotas (ex: meta: { requerAutenticacao: true }). Pesquise como usar o to.meta no Vue Router.
🔑 Gabarito de Código/Fórmulas
Prática 2 (Conceito):
Na rota:
{ path: '/qg', component: QGSecreto, meta: { requerAutenticacao: true } }No guarda:
if (to.meta.requerAutenticacao && !isJedi) {
next('/');
}