Angular a cinq types de gardes d’itinéraire pour contrôler l’accès à des itinéraires spécifiques. Apprenez à les mettre en œuvre en cinq étapes, avec le Guard de route Canactivate comme exemple.
Un garde de route est une fonctionnalité qui contrôle l’accès à des itinéraires spécifiques dans l’application angulaire. Il peut protéger les itinéraires contre l’accès non autorisé, nécessiter que certaines conditions soient remplies avant de naviguer vers un itinéraire ou d’effectuer d’autres contrôles et actions pendant le processus de navigation.
Angular fournit cinq types de gardes de route:
- Canactiver
- Canactivatechild
- Caméra
- Peut télécharger
- Résoudre
La plupart du temps, vous utilisez des canaux ou des canechatechild. Le garde canativate détermine si un itinéraire peut être activé et le CanactivateChild détermine si une route enfant peut être activée.
Dans cet article, nous apprendrons à créer et à appliquer un garde d’itinéraire Canactivate sur les itinéraires.
Étape 1: Créez l’itinéraire
Vous pouvez créer un itinéraire avec des composants chargés de paresseux comme ci-dessous:
export const routes: Routes = [
{
path: 'login',
loadComponent: () =>
import('./login/login.component').then((m) => m.LoginComponent),
},
{
path: '',
children: [
{
path: 'home',
loadComponent: () =>
import('./home/home.component').then((m) => m.HomeComponent),
},
{
path: 'product',
loadComponent: () =>
import('./product/product.component').then((m) => m.ProductComponent),
},
{
path: 'invoice',
loadComponent: () =>
import('./invoice/invoice.component').then((m) => m.InvoiceComponent),
},
{
path: '',
redirectTo: '/home',
pathMatch: 'full',
},
{
path: '**',
component: PageNotFoundComponent,
},
],
},
];
Comme le montrent les routes ci-dessus, plusieurs composants, tels que ProductComponent, InvoiceComponent et HomeComponent, sont chargés paresseusement. De plus, un connexion LoginComponent va gérer la navigation pour les utilisateurs non autorisés, en les redirigeant vers l’itinéraire de connexion.
Un point crucial sur l’itinéraire de connexion est qu’il n’est pas inclus en tant qu’enfant de l’itinéraire principal.
Étape 2: Configurez l’itinéraire
Dans les nouvelles versions d’Angular, vous devez fournir l’itinéraire sur l’applicationConfig, comme démontré ci-dessous.
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient(),
provideAnimationsAsync()]
};
Étape 3: Créer un service Auth
Dans le service Auth, nous créerons deux fonctions distinctes: une pour gérer l’opération de connexion et une autre pour lire le jeton du stockage local pour déterminer si l’utilisateur est connecté.
Si vous connaissez les bases d’Angular, vous savez déjà comment effectuer une opération de poste pour un point de terminaison de repos. Dans ce cas, nous définissons l’en-tête de type contenu et utilisons HttpClient pour faire la demande de publication au point de terminaison de connexion.
login(user: ILoginUser): Observable<any> {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
});
return this.httpClient.post('http://localhost:3000/login', user, {
headers,
});
}
La fonction isloggedin est créée comme indiqué ci-dessous:
isLoggedIn(): Observable<boolean> {
const token = localStorage.getItem('token');
if (token) {
return of(true);
}
return of(false);
}
Le isLoggedIn La fonction est conçue pour déterminer si un utilisateur est actuellement connecté en vérifiant la présence d’un jeton dans le stockage local du navigateur et si le jeton récupéré existe.
L’utilisateur est connecté si le jeton est trouvé (c’est-à-dire pas nul ou indéfini). Si un jeton existe, il renvoie un observable qui émet de vrai; Sinon, il renvoie un observable qui émet de faux.
Rassemblant tout ensemble, l’AuthService ressemble à l’extrait de code suivant:
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { ILoginUser } from './loginuser.interface';
import { Observable, of } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class AuthService {
private httpClient = inject(HttpClient);
public redirectUrl: string | null = null;
constructor() {}
login(user: ILoginUser): Observable<any> {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
});
return this.httpClient.post('http://localhost:3000/login', user, {
headers,
});
}
isLoggedIn(): Observable<boolean> {
const token = localStorage.getItem('token');
if (token) {
return of(true);
}
return of(false);
}
}
Prenez note de la déclaration de redirection. Vous l’utiliserez pour revenir à l’itinéraire où le processus de connexion a été initialement initié.
Étape 4: Créer un composant de connexion
Dans le composant de connexion, configurez un formulaire réactif qui comprend des champs pour le nom d’utilisateur et le mot de passe.
this.loginForm = this.fb.group({
username: ['', [Validators.required]],
password: ['', [Validators.required]],
});
Ensuite, le modèle lie la forme réactive aux commandes HTML, comme indiqué ci-dessous.
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" formControlName="username" id="username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" formControlName="password" id="password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
Créer le onSubmit Méthode pour gérer l’événement Click pour le bouton de connexion.
onSubmit(): void {
if (this.loginForm.valid) {
this.authService.login(this.loginForm.value).subscribe((data) => {
if (data) {
localStorage.setItem('token', data.token);
const redirectUrl = this.authService.redirectUrl
? this.authService.redirectUrl
: "https://www.telerik.com/";
this.router.navigate([redirectUrl]);
this.authService.redirectUrl = null;
}
});
}
}
Le onSubmit La méthode effectue les tâches suivantes:
- Il vérifie si le formulaire est valide ou non.
- Il appelle la fonction de connexion de
authService. - Sur une réponse réussie, il économise le jeton dans le stockage local du navigateur.
- Il détermine l’URL pour rediriger l’utilisateur après une connexion réussie.
- Il vérifie si une URL de redirection est définie dans le service. Si c’est le cas, l’utilisateur est redirigé vers cette URL; Sinon, l’utilisateur est redirigé vers l’URL racine.
En résumé, il effectue l’opération de connexion, enregistre le jeton et redirige vers l’URL définie dans le service.
Étape 5: Application du garde
Enfin, appliquez le garde de l’itinéraire sur l’itinéraire. Dans ce cas, utilisez le canActivate Route Garde sur l’itinéraire principal, comme démontré ci-dessous.
export const routes: Routes = [
{
path: 'login',
loadComponent: () =>
import('./login/login.component').then((m) => m.LoginComponent),
},
{
path: '',
canActivate: [authGuard],
children: [
],
},
];
Résumé
Ces étapes sont nécessaires pour ajouter un garde d’itinéraire dans une application angulaire. Pour résumer, un garde d’itinéraire dans Angular aide à contrôler qui peut accéder à des pages spécifiques de votre application. Il aide à protéger les pages des utilisateurs qui ne devraient pas les voir, comme ceux qui ne sont pas connectés, et cela nécessite que certaines conditions soient remplies avant d’ouvrir une page.
J’espère que vous trouverez ce post précieux et confiant dans la mise en œuvre des gardes d’itinéraire dans votre application angulaire.
Source link