Aula 13 de Angular

Guarda de Rotas

As Guardas de Rotas no Angular permitem controlar o acesso a determinadas rotas com base em condições, como autenticação e permissões do usuário. Elas são úteis para proteger áreas restritas da aplicação.

1. Tipos de Guards

CanActivate: Controla se a rota pode ser acessada.
CanActivateChild: Controla o acesso a rotas filhas.
CanDeactivate: Impede a saída de uma rota sem confirmação.
Resolve: Pré-carrega dados antes de ativar a rota.
CanLoad: Impede o carregamento de módulos (lazy loading) sem permissão.

2. Exemplo com Login e Roles

Vamos criar um guard que permite acesso apenas a usuários logados e com determinada role.

// auth.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private usuario: any = null;

  login(nome: string, role: string) {
    this.usuario = { nome, role };
  }

  logout() {
    this.usuario = null;
  }

  estaLogado(): boolean {
    return !!this.usuario;
  }

  temRole(role: string): boolean {
    return this.usuario?.role === role;
  }
}

2.1 Criando o Guard

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (!this.auth.estaLogado()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

2.2 Guard para Roles

// role.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class RoleGuard implements CanActivate {
  constructor(private auth: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    const roleNecessaria = route.data['role'];
    if (this.auth.estaLogado() && this.auth.temRole(roleNecessaria)) {
      return true;
    }
    this.router.navigate(['/acesso-negado']);
    return false;
  }
}

3. Configuração das Rotas

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AdminComponent } from './admin/admin.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';
import { RoleGuard } from './role.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard, RoleGuard],
    data: { role: 'admin' }
  },
  { path: 'acesso-negado', component: AcessoNegadoComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. Como Funciona

- Ao tentar acessar /admin, o Angular executa primeiro o AuthGuard para verificar se o usuário está logado.
- Em seguida, o RoleGuard verifica se o usuário tem a role definida na rota.
- Caso alguma verificação falhe, o usuário é redirecionado para /login ou /acesso-negado.