En Angular 18, la autenticación y la autorización son fundamentales para crear aplicaciones seguras. Este módulo se centra en cómo implementar estas funcionalidades siguiendo las mejores prácticas y recomendaciones actuales.
Configuración inicial
Para empezar, asegúrate de tener configurado un nuevo proyecto de Angular 18. Si aún no lo has hecho, ejecuta el siguiente comando:
ng new mi-proyecto-angular
cd mi-proyecto-angular
Instalación de dependencias
Para manejar la autenticación y autorización, es recomendable usar bibliotecas como @auth0/angular-jwt
. Instálala con:
npm install @auth0/angular-jwt
Configuración del módulo HTTP
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
Configura el módulo HTTP y los interceptores para manejar los tokens JWT.
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { JwtModule } from '@auth0/angular-jwt';
export function tokenGetter() {
return localStorage.getItem('access_token');
}
@NgModule({
imports: [
HttpClientModule,
JwtModule.forRoot({
config: {
tokenGetter: tokenGetter,
allowedDomains: ['localhost:4200'],
disallowedRoutes: ['localhost:4200/api/auth']
}
})
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }
]
})
export class AppModule {}
Servicio de autenticación
Crea un servicio de autenticación para manejar el inicio de sesión y la gestión de tokens.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private apiUrl = 'http://localhost:4200/api/auth';
constructor(private http: HttpClient, private router: Router) {}
login(credentials: { email: string, password: string }): Observable<any> {
return this.http.post(`${this.apiUrl}/login`, credentials).pipe(
tap((response: any) => {
localStorage.setItem('access_token', response.token);
})
);
}
logout() {
localStorage.removeItem('access_token');
this.router.navigate(['login']);
}
public get loggedIn(): boolean {
return localStorage.getItem('access_token') !== null;
}
}
Guardias de ruta
Implementa guardias de ruta para proteger las rutas que requieren autenticación.
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
if (this.authService.loggedIn) {
return true;
} else {
this.router.navigate(['login']);
return false;
}
}
}
Uso de guardias en rutas
Configura las rutas protegidas en tu módulo de enrutamiento.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
{ path: '**', redirectTo: 'login' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Completa Angular y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs