Angular Academy · Aula

Guardas de rota funcionais

Proteja rotas com guardas funcionais.

Guardas de rota funcionais é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. 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 Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

O que são guardas de rota

Os guardas decidem se a navegação pode prosseguir: protegem rotas com autenticação, pedem confirmação antes de sair de um formulário ou restringem o acesso por função. O Angular moderno usa guardas funcionais — funções simples, sem classes.

CanActivateFn

Uma CanActivateFn retorna true para permitir, false para bloquear, um UrlTree para redirecionar ou um observable/promise de uma dessas opções.

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn();
};

Vinculando uma guarda a uma rota

Associe guardas usando canActivate (um vetor, para que possa empilhar várias).

export const routes = [
  { path: 'dashboard', component: DashboardComponent,
    canActivate: [authGuard] }
];

Redirecionando com UrlTree

Retornar uma UrlTree (de router.createUrlTree ou parseUrl) bloqueia e redireciona em uma única etapa.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.parseUrl('/login');
};

Guardas assíncronas

As guardas podem retornar um observável — o roteador aguarda o primeiro valor e, então, conclui.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.checkSession$().pipe(
    map(ok => ok ? true : inject(Router).parseUrl('/login'))
  );
};

Acessando informações da rota em uma guarda

Uma CanActivateFn recebe o ActivatedRouteSnapshot e o RouterStateSnapshot, permitindo ler parâmetros, dados e a URL tentada.

export const roleGuard: CanActivateFn = (route, state) => {
  const needed = route.data['role'];
  const auth = inject(AuthService);
  return auth.hasRole(needed);
};

Guardas canMatch

CanMatchFn decide se uma definição de rota corresponde de fato — útil para trocar rotas por sinalizador de funcionalidade ou carregar de forma tardia somente quando permitido.

import { CanMatchFn } from '@angular/router';

export const featureGuard: CanMatchFn = () =>
  inject(FeatureService).enabled('beta');

Guardas canDeactivate

CanDeactivateFn é executada ao sair de uma rota — perfeita para confirmações de alterações não salvas. Ela recebe a instância do componente.

import { CanDeactivateFn } from '@angular/router';

export const unsavedGuard: CanDeactivateFn<FormComponent> =
  (component) => component.isPristine() || confirm('Discard changes?');

Empilhando várias guardas

Todas as guardas do vetor devem permitir a navegação. Elas são executadas em conjunto; se alguma retornar false ou uma UrlTree, a navegação será bloqueada ou redirecionada.

canActivate: [authGuard, roleGuard]
// both must pass

Por que usar guardas funcionais em vez de guardas baseadas em classes

As guardas funcionais são mais simples: não exigem código repetitivo de @Injectable, facilitam o uso de inject(), permitem composição e podem ser removidas pelo tree-shaking. As interfaces CanActivate baseadas em classes estão obsoletas.

Guardas e rotas filhas

canActivateChild protege todas as rotas filhas de um elemento pai em um único lugar, evitando repetir a guarda em cada filha.

{ path: 'admin', canActivateChild: [authGuard],
  children: [ /* all protected */ ] }

Verificação rápida

Teste sua compreensão sobre guardas funcionais.

Recapitulação: guardas funcionais de rotas

As guardas funcionais controlam a navegação com funções simples.

CanActivateFn: permitir, bloquear ou redirecionar (UrlTree).
CanMatchFn: verificar se uma rota corresponde de fato.
CanDeactivateFn: confirmar a saída.
Use inject() para obter serviços; empilhe as guardas em vetores.

A seguir: eventos do roteador e navegação.

Perguntas Frequentes

A aula “Guardas de rota funcionais” é grátis?

Sim — o texto completo de “Guardas de rota funcionais” é 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 Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Guardas de rota funcionais”?

Proteja rotas com guardas funcionais. Você pratica Angular 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 Angular Academy?

Nenhuma experiência prévia é necessária. Angular 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 4.

Quanto tempo leva a aula “Guardas de rota funcionais”?

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

Sim. Cada aula de Angular 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

Parâmetros de rota e parâmetros de consulta
Resolvers e dados de rota
Guardas de rota funcionais
Eventos do roteador e navegação

← Voltar para Angular Academy