🚀 Capítulo 15: Parâmetros de Rotas e Guardas

🎯 Objetivo da Aula

Ao final desta aula, você será capaz de passar informações dinâmicas através da URL (parâmetros de rota) e proteger rotas específicas usando Guardas (Guards), impedindo que usuários não autorizados acessem áreas restritas.

---

🏢 O Cenário Prático (Seu Desafio)

Você precisa criar uma rota para ver os detalhes de um planeta específico passando o ID dele na URL (ex: /planeta/1). Além disso, a rota do Quartel General contém planos secretos e só pode ser acessada por quem tiver a credencial de “Mestre Jedi”!

---

🧠 Fundamentos: A Teoria Traduzida

1. Parâmetros de Rota (:id)

Servem para enviar dados na própria URL. O Angular entende que a parte que começa com : é uma variável.

• Configuração: { path: 'planeta/:id', component: DetalheComponent }
• Uso: localhost:4200/planeta/5 (O Angular abrirá o componente e você poderá ler o número 5).

2. Guardas de Rota (CanActivate)

São funções que rodam antes de a rota ser aberta. Se a função retornar true, o usuário entra. Se retornar false, o acesso é bloqueado!

• Analogia: É o Stormtrooper (ou o segurança) na porta perguntando: “Identifique-se!“.

---

📖 Exemplo Guiado: Lendo Parâmetros e Protegendo a Rota

Vamos implementar os parâmetros e o guarda.

🛠️ Passo a Passo (Lendo Parâmetros)

Crie o componente detalhe-planeta. Para ler o parâmetro da URL, usamos o serviço ActivatedRoute:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
@Component({ /* ... */ })
export class DetalhePlanetaComponent implements OnInit {
  planetaId: string | null = '';
 
  constructor(private route: ActivatedRoute) {}
 
  ngOnInit(): void {
    // Pega o parâmetro 'id' da URL
    this.planetaId = this.route.snapshot.paramMap.get('id');
  }
}

🛠️ Passo a Passo (Criando um Guarda Funcional)

No Angular moderno, podemos criar um guarda como uma função simples no arquivo de rotas ou separado:

// app.routes.ts
import { inject } from '@angular/core';
import { Routes, CanActivateFn, Router } from '@angular/router';
 
// Função do Guarda
const jediGuard: CanActivateFn = (route, state) => {
  const router = inject(Router);
  const isJedi = true; // Simulação: mude para false para testar o bloqueio
 
  if (isJedi) {
    return true; // Permite o acesso
  } else {
    alert('Acesso negado! Apenas Mestres Jedi.');
    router.navigate(['/painel']); // Redireciona
    return false; // Bloqueia
  }
};
 
export const routes: Routes = [
  { path: 'qg', component: QuartelGeneralComponent, canActivate: [jediGuard] },
  { path: 'planeta/:id', component: DetalhePlanetaComponent }
];

🕹️ Como Executar e Testar no VS Code

1. Salve tudo e execute ng serve.
2. Digite na URL do navegador: localhost:4200/planeta/42. Veja o componente exibir o número 42!
3. Tente acessar o QG. Se isJedi for false, você será jogado de volta para o painel!

---

🛠️ Prática Obrigatória 1

No componente detalhe-planeta, use o planetaId que você pegou da URL para exibir a mensagem: “Carregando dados do planeta código [ID]“.

---

🛠️ Prática Obrigatória 2

Mude a variável isJedi no guarda para false e tente clicar no link do Quartel General no menu. Verifique se o alerta aparece e se você é redirecionado.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No HTML de detalhe-planeta:

<h2>Detalhes do Planeta</h2>
<p>Carregando dados do planeta código: {{ planetaId }}</p>

---

← Capitulo Anterior | Proximo Capitulo →