O que são route guards?

Question

Accepted Answer

**Route guards** são funções que controlam **se a navegação para/de uma rota é permitida**. Elas são executadas antes de uma rota ser ativada (ou antes de você deixá-la), permitindo verificações de autenticação, controle de permissões e prompts de "alterações não salvas". ## Por que isso importa ```text CanActivate → can the user enter this route? (auth/permission check) CanActivateChild → same, for child routes CanDeactivate → can the user LEAVE? ("you have unsaved changes") CanMatch → should this route even be matched? (feature flags, role-based) resolve → pre-fetch data BEFORE the route activates ``` ## Um guard CanActivate funcional (Angular moderno) ```ts import { CanActivateFn, Router } from "@angular/router"; import { inject } from "@angular/core"; export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); if (auth.isLoggedIn()) { return true; // allow navigation } return router.createUrlTree(["/login"]); // redirect to login }; ``` Um guard retorna `true` (permitir), `false` (bloquear) ou uma `UrlTree` (redirecionar). O Angular moderno usa **guards funcionais** (funções simples com `inject()`) em vez dos antigos baseados em classes. ## Aplicando guards às rotas ```ts export const routes: Routes = [ { path: "dashboard", component: DashboardComponent, canActivate: [authGuard], // protect this route }, { path: "admin", component: AdminComponent, canMatch: [roleGuard], // only match for admins }, ]; ``` ## CanDeactivate — prevenir perda de dados acidental ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Este guard clássico avisa os usuários antes de navegar para longe de um formulário com edições não salvas. ## Guards podem ser assíncronos ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Por que isso importa Guards são a forma padrão e centralizada de impor controle de acesso e regras de navegação em Angular — protegendo rotas autenticadas, restringindo por função/permissão, prevenindo perda de dados ao sair e pré-carregando dados (resolvers). Colocar essas verificações em guards (em vez de espalhadas nos componentes) mantém a lógica de segurança e navegação consistente e declarativa; o `authGuard` em rotas protegidas é algo que praticamente todo aplicativo Angular real implementa.