📚 Módulo 07: Frontend - Autenticação, Guards e Interceptor

✅ Pré-Requisitos deste Módulo

Confirme antes de começar:

npm start   # dentro de web/ — deve abrir localhost:4200 sem erros

Você deve ter concluído o Módulo 06 (projeto Angular criado, rotas e app.config.ts configurados).

Neste módulo, implementaremos a espinha dorsal de segurança e comunicação do nosso cliente SPA. Programaremos a lógica de autenticação reativa utilizando o novo e poderoso recurso de Angular Signals, criaremos uma guarda de rota (Guard) funcional para proteger páginas administrativas e desenvolveremos um interceptor HTTP (Interceptor) que anexa tokens JWT automaticamente em todas as requisições, finalizando com o design visual moderno da TecLoja escrito em CSS Nativo.

---

⚡ 1. Reatividade Moderna com Angular Signals

Introduzido recentemente, o Angular Signals representa uma revolução no gerenciamento de estados e reatividade.

🧠 Por que usar Signals em vez de Observables (RxJS)?

• Simplicidade de Leitura: Em vez de operadores complexos do RxJS (como BehaviorSubject, map ou pipes assíncronos no HTML), um Signal é apenas uma função que retorna seu valor de forma síncrona e monitora de perto onde é consumido.
• Granularidade de Mudança: O Angular atualiza apenas a parte exata da tela (o nó do DOM) vinculada àquele Signal específico quando seu valor muda, em vez de reavaliar o componente inteiro, garantindo um desempenho incrível para a aplicação.

---

☕ 2. Códigos Fonte de Segurança e Conectividade

Crie as estruturas abaixo nos pacotes designados:

1. Serviço de Autenticação (src/app/services/auth.service.ts)

Gerencia o login, armazena com segurança o token JWT no localStorage do navegador e mantém um Signal reativo com os dados do usuário conectado.

import { Injectable, signal, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { Observable, tap } from 'rxjs';
import { LoginResponse } from '../models/auth.model';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private http = inject(HttpClient);
  private router = inject(Router);
  private apiUrl = 'http://localhost:8080/api/v1/auth';

  // Signal Reativo contendo o usuário logado e seu papel administrativo
  currentUser = signal<LoginResponse | null>(this.getStoredUser());

  login(username: string, senha: string): Observable<LoginResponse> {
    return this.http.post<LoginResponse>(`${this.apiUrl}/login`, { username, senha }).pipe(
      tap(response => {
        // Gravar no localStorage para persistência entre atualizações de tela
        localStorage.setItem('tecloja_user', JSON.stringify(response));
        // Atualiza o valor do Signal reativamente
        this.currentUser.set(response);
      })
    );
  }

  logout(): void {
    localStorage.removeItem('tecloja_user');
    this.currentUser.set(null);
    this.router.navigate(['/login']);
  }

  getToken(): string | null {
    const user = this.currentUser();
    return user ? user.token : null;
  }

  isAuthenticated(): boolean {
    return this.currentUser() !== null;
  }

  isAdmin(): boolean {
    const user = this.currentUser();
    return user ? user.role === 'ROLE_ADMIN' : false;
  }

  private getStoredUser(): LoginResponse | null {
    const userJson = localStorage.getItem('tecloja_user');
    if (userJson) {
      try {
        return JSON.parse(userJson) as LoginResponse;
      } catch {
        return null;
      }
    }
    return null;
  }
}

2. O Interceptor Funcional de JWT (src/app/interceptors/auth.interceptor.ts)

Este interceptor funciona como uma esteira transparente. Ele detecta se o usuário possui um token válido no AuthService e o anexa automaticamente no cabeçalho Authorization: Bearer <TOKEN> de todas as requisições HTTP enviadas à API do backend.

flowchart LR
    A[HttpClient] -->|Qualquer requisição API| B{authInterceptor}
    B --> C{AuthService.getToken()}
    C -- Token Existe --> D[req.clone com Header Bearer]
    C -- Token Nulo --> E[Mantém req original]
    D --> F[Spring Boot API]
    E --> F
    
    style B fill:#f9f,stroke:#333,stroke-width:2px

import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { AuthService } from '../services/auth.service';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthService);
  const token = authService.getToken();

  // Ignorar requisições externas (como APIs de CEP) ou chamadas de Login
  if (token && req.url.includes('/api/')) {
    const authReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });
    return next(authReq);
  }

  return next(req);
};

3. A Guarda de Rota para Administradores (src/app/guards/admin.guard.ts)

Impede que usuários comuns acessem o painel administrativo de controle de estoque simplesmente digitando a URL no navegador.

import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from '../services/auth.service';

export const adminGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isAuthenticated() && authService.isAdmin()) {
    return true; // Acesso Permitido
  }

  // Redireciona usuários não autorizados para a tela de login
  router.navigate(['/login']);
  return false;
};

---

🎨 3. Design System Visual Moderno (src/styles.css)

A experiência do usuário (UX) deve ser espetacular. Utilizaremos CSS Nativo com variáveis CSS customizadas, gradientes suaves, sombras dinâmicas e Glassmorphism (efeito de vidro translúcido) para dar um visual extremamente premium e moderno à TecLoja.

Insira em src/styles.css do seu projeto Angular:

/* Importação de fonte moderna do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

:root {
  /* Variáveis de Cores (Paleta HSL Harmoniosa e Premium) */
  --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  --panel-bg: rgba(30, 41, 59, 0.7);
  --border-color: rgba(255, 255, 255, 0.1);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --primary-color: #6366f1; /* Indigo */
  --primary-hover: #4f46e5;
  --accent-color: #06b6d4;  /* Cyan */
  --danger-color: #f43f5e;
  --success-color: #10b981;
  --font-family: 'Outfit', sans-serif;
  --transition-speed: 0.3s;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background: var(--bg-gradient);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Efeito Glassmorphism (Painéis Translúcidos Premium) */
.glass-panel {
  background: var(--panel-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  padding: 2rem;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.glass-panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px 0 rgba(99, 102, 241, 0.15);
}

/* Estilos de Botões Premium com Micro-animações */
.btn {
  font-family: var(--font-family);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-speed) ease;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: scale(1.03);
}

.btn-danger {
  background: var(--danger-color);
  color: white;
}

.btn-danger:hover {
  background: #e11d48;
  transform: scale(1.03);
}

/* Formulários Modernos Reativos */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-family);
  transition: border-color var(--transition-speed);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Navbar Responsiva do E-commerce */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 5%;
  background: rgba(15, 23, 42, 0.8);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}

.navbar-brand {
  font-size: 1.75rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
  background: linear-gradient(to right, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar-menu {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  list-style: none;
}

.navbar-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-speed);
}

.navbar-link:hover, .navbar-link.active {
  color: var(--primary-color);
}

---

🤔 Por que localStorage para o token JWT?

localStorage persiste entre abas e após fechar e reabrir o navegador — ideal para que o usuário não precise logar novamente toda vez. A alternativa, sessionStorage, limpa o token ao fechar a aba. Cookies seriam mais seguros contra XSS, mas exigem configuração de backend (Set-Cookie, HttpOnly, SameSite) que foge do escopo desta disciplina. Para produção real, prefira cookies HttpOnly; para fins didáticos, localStorage é aceitável.

No app Mobile (Módulo 11), usamos Capacitor Preferences em vez de localStorage porque o sistema operacional iOS/Android pode limpar o armazenamento do navegador interno a qualquer momento por pressão de memória, o que deslogaria o usuário sem aviso.

🔍 Checkpoint

Com o backend rodando, teste o fluxo de login:

1. Inicie o Angular: npm start
2. Abra http://localhost:4200/admin/produtos — deve redirecionar para /login (o adminGuard atuando)
3. Abra http://localhost:4200/login — deve exibir o formulário de login
4. Faça login com admin@tecloja.com / admin123
5. Após login, abra o DevTools (F12) → Application → Local Storage e confirme que tecloja_user está salvo com o token JWT

Resultado esperado: tecloja_user contém um JSON com username, role e token (string começando com eyJ).

⚠️ Erros Comuns

Sintoma	Causa	Solução
NullInjectorError: No provider for HttpClient	provideHttpClient ausente no app.config.ts	Confirme provideHttpClient(withInterceptors([authInterceptor])) no providers
Guard não redireciona para /login	adminGuard não registrado na rota	Confirme canActivate: [adminGuard] nas rotas protegidas no app.routes.ts
Login retorna 401 mesmo com credenciais corretas	Backend retornando erro no campo "senha"	Confirme que o AuthService.login() envia { username, senha } — não { username, password }
currentUser sempre null após login	localStorage não foi atualizado	Confirme que o tap no AuthService.login() chama localStorage.setItem E this.currentUser.set(response)
Interceptor não anexa o token	Token null no AuthService.getToken()	Verifique se localStorage.getItem('tecloja_user') está retornando o objeto correto — o token pode estar em user.token

---

🏁 Conclusão e Próximos Passos

Toda a infraestrutura lógica de segurança, conectividade e design visual foi estabelecida com primor! A aplicação já consegue autenticar usuários via API e propagar o estado da conexão instantaneamente por toda a tela devido ao reativismo dos Signals.

No Módulo 08, daremos vida às interfaces da TecLoja. Desenvolveremos o Catálogo de Produtos responsivo com filtros de pesquisa, estruturaremos o Carrinho de Compras reativo gerenciado por Signals locais e programaremos os formulários reativos para o CRUD de Produtos da área administrativa.

---

Voltar para o Sumário

⬅️ Anterior Próximo ➡️