Módulo 18: Guards e Interceptors (Segurança)
2. Resumo da Aula Anterior
No Módulo 17, vimos como passar parâmetros pelas rotas e como tornar o site super rápido com o Lazy Loading. Agora, vamos lidar com a segurança: como impedir que utilizadores não autorizados entrem em certas páginas e como gerir tokens de autenticação de forma automática.
3. O Que Vais Aprender Hoje
- ✅ Proteger rotas com Route Guards (canActivate).
- ✅ Criar Functional Guards (o padrão moderno).
- ✅ Automatizar pedidos HTTP com Interceptors.
- ✅ Injetar Headers (Tokens) em todas as chamadas à API de uma vez só.
4. Teoria: Os Sentinelas da App
Route Guards: São funções que o Router executa antes de carregar um componente. Se a função devolver `false`, a navegação é cancelada e o utilizador não entra.
Interceptors: São "filtros" para as tuas chamadas HTTP. Imagina que tens 50 serviços a pedir dados à API. Em vez de escreveres o código do Token (JWT) em todos eles, o Interceptor "agarra" no pedido antes de ele sair do browser e coloca o selo de segurança.
🛂 Analogia: O Prédio de Escritórios
Imagina um edifício empresarial de alta segurança:
- Route Guard (O Segurança da Porta): Tu tentas carregar o elevador para o 10º andar (Área Admin). O segurança pede-te o cartão. Se não tiveres, ele nem te deixa entrar no elevador.
- Interceptor (O Estafeta Interno): Tu escreves uma carta (Pedido HTTP) para o armazém. Tu apenas escreves o conteúdo. O estafeta pega na tua carta e, antes de a enviar pelo correio, coloca-lhe o carimbo oficial da empresa e o selo de prioridade (Headers/Tokens) automaticamente.
5. Exemplos Práticos
Exemplo 1: Functional Guard (canActivate)
Uma função simples que verifica o acesso.
export const authGuard: CanActivateFn = (route, state) => {
const authService = inject(AuthService);
const router = inject(Router);
if (authService.isLoggedIn()) {
return true; // Pode passar!
} else {
return router.parseUrl('/login'); // Redireciona para o login
}
};
// Nas rotas:
{ path: 'admin', component: AdminComp, canActivate: [authGuard] }Exemplo 2: O Interceptor de Tokens
Adicionar o Header de autorização a todos os pedidos.
export const authInterceptor: HttpInterceptorFn = (req, next) => {
const token = localStorage.getItem('token');
// Clonamos o pedido para adicionar o cabeçalho
const authReq = req.clone({
setHeaders: { Authorization: `Bearer ${token}` }
});
return next(authReq); // Deixa o pedido seguir viagem
};Exemplo 3: Registro no app.config.js
Dizer ao Angular para usar o interceptor.
providers: [
provideHttpClient(
withInterceptors([authInterceptor])
)
]6. Agora é a Tua Vez!
Vamos criar o "Cofre Digital":
- Cria uma rota
/cofreque aponte para umCofreComponent. - Cria um **Functional Guard** que verifica se existe uma variável no
localStoragechamada 'acessoPermitido'. - Aplica o guard à rota do cofre. Se tentares entrar sem o valor no storage, o Angular deve barrar-te!
- Cria um **Interceptor** que faz um
console.logde toda a URL de cada pedido que o site fizer. - Regista o interceptor no teu
app.config.tse observa a magia na consola enquanto navegas.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 **Route Guards** controlam o acesso às vistas da aplicação.
- 📌 **canActivate** é o guard mais comum para autenticação.
- 📌 **Interceptors** permitem manipular pedidos e respostas HTTP globalmente.
- 📌 Usar interceptors evita repetição de código (DRY - Don't Repeat Yourself).
- 📌 Segurança no Frontend é para **UX**; a segurança real deve estar sempre no Servidor (Backend).
9. Desafios Práticos
Desafio 1: Invasão de URL
Se um "hacker" mudar o código do teu Guard no browser para return true, ele consegue ver os teus dados privados?
Desafio 2: Interceptor de Erros
É possível usar um Interceptor para mostrar um alert() automaticamente se o servidor devolver um erro 500?
Desafio 3: Guard de Saída
Imagina que o utilizador está a preencher um formulário gigante e clica num link para sair sem sem querer. Que tipo de Guard podes usar para mostrar um aviso "Tens a certeza que queres sair sem guardar?"