Guardas de Navegação no VueRouter

No framework Vue.js, o vue-router oferece um sistema de guardas de navegação que permitem interceptar, redirecionar ou cancelar transições de rota. Essas guardas são funções de callback executadas em diferentes pontos do ciclo de vida da navegação, possibilitando controle granular, como verificação de permissões ou salvamento de dados antes de abandonar uma página.

Tipos de Guardas de Navegação

As guardas de navegação são categorizadas em três grupos: globais, específicas de rota e dentro de componentes. As guardas globais afetam todas as rotas e são definidas diretamente no instanciamento do roteador. As guardas específicas de rota são configuradas na definição de uma rota particular. As guardas dentro de componentes são declaradas dentro do componente Vue associado à rota.

Parâmetros Comuns

A maioria das guardas recebe três argumentos: o objeto de rota de destino (para), o objeto de rota de origem (de) e uma função proximo para resolver a guarda. A função proximo deve ser chamada para continuar o fluxo de navegação, com opções como prosseguir, cancelar ou redirecionar.

Guardas Globais

Essas guardas são registradas no roteador e executam-se para todas as transições. Exemplos incluem ganchos de antes e depois da navegação.

Gancho Global Antes da Navegação

Executado no início da navegação, antes de qualquer componente ser resolvido. Ideal para lógicas de autenticação global.

const configuracaoRoteador = { /* definições de rotas */ }
const meuRoteador = new VueRouter(configuracaoRoteador)

meuRoteador.beforeEach((para, de, proximo) => {
  if (verificarPermissao(para)) {
    proximo();
  } else {
    proximo({ path: "/acesso-negado" });
  }
})

Gancho Global de Resolução

Similar ao gancho anterior, mas invocado após todas as guardas de componentes e rotas assíncronas serem resolvidas, garantindo que os dados necessários estejam disponíveis.

meuRoteador.beforeResolve((para, de, proximo) => {
  console.log("Navegação quase confirmada:", para.fullPath);
  proximo();
})

Gancho Global Pós-Navegação

Este gancho é acionado após a navegação ser confiramda e não aceita o parâmetro proximo, pois não pode alterar a navegação. Útil para analytics ou limpeza.

meuRoteador.afterEach((para, de) => {
  registrarAcesso(para.path);
})

Guardas Específicas de Rota

Definidas diretamente na configuração de uma rota, essas guardas aplicam-se apenas àquela rota particular.

const rotas = [
  {
    path: "/painel",
    component: PainelComponente,
    beforeEnter: (para, de, proximo) => {
      if (usuarioAutenticado()) {
        proximo();
      } else {
        proximo("/login");
      }
    }
  }
]
const roteador = new VueRouter({ routes: rotas })

Guardas Dentro de Componentes

Essas guardas são declaradas como opções dentro de um componente Vue, permitindo lógica específica do ciclo de vida do componente.

Antes de Entrar na Rota

Invocada antes do componente ser montado; não tem acesso à instância this, mas pode receber um callback via proximo para acessar o componente após a confirmação.

const MeuComponente = {
  template: '<div>Conteúdo</div>',
  beforeRouteEnter(para, de, proximo) {
    proximo(vm => {
      console.log("Instância do componente:", vm);
    });
  }
}

Antes de Atualizar a Rota

Útil em rotas dinâmicas; dispara quando a rota muda, mas o componente é reutilizado. Permite acessar this para carregar novos dados.

const ComponenteDinamico = {
  template: '<div>{{ dados }}</div>',
  beforeRouteUpdate(para, de, proximo) {
    this.carregarDados(para.params.id);
    proximo();
  },
  methods: {
    carregarDados(id) { /* lógica assíncrona */ }
  }
}

Antes de Sair da Rota

Executada ao navegar para fora da rota; frequentemente usada para confirmar ações, como salvar alterações não salvas.

const ComponenteFormulario = {
  template: '<form>...</form>',
  beforeRouteLeave(para, de, proximo) {
    if (this.formularioModificado) {
      proximo(window.confirm("Alterações não salvas. Deseja sair?"));
    } else {
      proximo();
    }
  }
}

Fluxo de Resolução da Navegação

Quando uma navegação é acionada, as guardas são executadas em uma sequência específica:

1. Gancho beforeRouteLeave no componente desativado.
2. Gancho global beforeEach.
3. Gancho beforeRouteUpdate em componentes reutilizados.
4. Gancho beforeEnter na configuração da rota.
5. Resolução de componentes assíncronos.
6. Gencho beforeRouteEnter no componente ativado.
7. Gancho global beforeResolve.
8. Navegação confirmada.
9. Gancho global afterEach.
10. Ciclo de vida do componente (beforeCreate, created, etc.).
11. Atualização do DOM.
12. Callback no proximo de beforeRouteEnter é invocado com a instância do componente.