Guardas de Navegação Globais

No Vue Router, guardas de navegação globais são hooks que interceptam todas as transições de rota. O router.beforeEach é usado antes de a navegação ser confirmada.

Os parâmetros da função de retorno incluem to (rota de destino), from (rota de origem) e next (uma função para controlar a continuação). Para ilustrar, configure um guarda global em um aplicativo Vue para verificar autenticação.

import VueRouter from 'vue-router';

const rotas = [
  { path: '/home', component: HomeComponent },
  { path: '/perfil', component: ProfileComponent, meta: { requerAuth: true } }
];

const roteador = new VueRouter({ routes: rotas });

roteador.beforeEach((para, de, proximo) => {
  const rotasPublicas = ['/home'];
  if (rotasPublicas.includes(para.path) || localStorage.getItem('token')) {
    proximo();
  } else {
    alert('Autenticação necessária. Redirecionando para login.');
    proximo('/login');
  }
});

O hook global router.afterEach é acionado após cada navegação e não requer uma chamada a next.

roteador.afterEach((para, de) => {
  console.log(`Navegou de ${de.path} para ${para.path}`);
});

Para verificações baseadas em estado, como Vuex, você pode acessar store.getters.estaAutenticado dentro do guarda.

Guardas Dentro do Componente

Componantes Vue podem ter guardas de navegação específicos. O beforeRouteEnter é chamado entes de o componente ser inserido no DOM, acessando instâncias via callback.

<script>
export default {
  data() {
    return {
      usuario: 'Carlos'
    };
  },
  beforeRouteEnter(para, de, proximo) {
    proximo(instancia => {
      alert('Bem-vindo, ' + instancia.usuario);
    });
  }
};
</script>

O beforeRouteLeave é útil para confirmar ações do usuário antes de sair da rota.

export default {
  beforeRouteLeave(para, de, proximo) {
    const confirmacao = confirm('Tem certeza que deseja sair?');
    if (confirmacao) {
      proximo();
    } else {
      proximo(false);
    }
  }
};

Guardas Específicos de Rota

Guardas de navegação podem ser definidos diretamente na configuração da rota usando beforeEnter. Eles seguem a mesma sintaxe dos guardas globais, mas afetam apenas rotas definidas.

const rotas = [
  {
    path: '/admin',
    component: AdminComponent,
    beforeEnter(para, de, proximo) {
      if (localStorage.getItem('adminAccess')) {
        proximo();
      } else {
        alert('Acesso restrito.');
        proximo('/home');
      }
    }
  }
];