Appearance
Qu'est qu'un guard sur Angular ? ​
Un Guard sur Angular est une fonctionnalité qui vous permet de contrôler l'accès à des routes spécifiques dans votre application. Vous pouvez utiliser des guards pour exécuter certaines vérifications ou actions avant de permettre l'accès à une route, par exemple pour vérifier si l'utilisateur est authentifié ou a les droits d'accès appropriés.
Voici un exemple très simple
- Créez un guard, par exemple dans un fichier
auth.guard.ts
:
ts
import { inject } from "@angular/core";
import { Router } from "@angular/router";
export const AuthGuard = () => {
return true
}
- Utilisez ce guard dans votre route (dans le fichier
app.routes.ts
par exemple) :
ts
import { AuthGuard } from './auth.guard';
import { AdminComponent } from './admin.component';
const routes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard], // Utilisation du guard
}
];
Exemple avec l'authentification ​
Voici un exemple de service d'authentification que vous pouvez utiliser avec le guard ci-dessus :
ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private isAuthenticated = false;
login() {
this.isAuthenticated = true;
}
logout() {
this.isAuthenticated = false;
}
isAuthenticated(): boolean {
return this.isAuthenticated;
}
}
Ce service contient une méthode login
qui définit la variable isAuthenticated
sur true
, une méthode logout
qui définit la variable isAuthenticated
sur false
, et une méthode isAuthenticated
qui retourne la valeur de la variable isAuthenticated
. Vous pouvez utiliser ces méthodes pour gérer l'authentification de l'utilisateur et pour contrôler l'accès à certaines routes avec le guard AuthGuard
.
Notez que cet exemple est très simplifié et ne prend pas en compte la persistance de l'état d'authentification entre les sessions ou la vérification des données d'identification de l'utilisateur. Il est recommandé de mettre en place une gestion de l'authentification plus complète et sécurisée dans votre application.
Le guard ​
Voici un exemple de guard qui vérifie si l'utilisateur est connecté à l'application avant de lui permettre l'accès à une route :
ts
import { inject } from "@angular/core";
import { Router } from "@angular/router";
import { AuthService } from "./auth.service";
export const AuthGuard = () => {
const auth = inject(AuthService);
const router = inject(Router);
if(!auth.isAuthenticated()) {
router.navigateByUrl('/login')
return false
}
return true
}
Dans ce cas, le code crée un "AuthGuard" qui vérifie si un utilisateur est authentifié avant de lui permettre d'accéder à une route protégée.
On crée la fonction
AuthGuard
qui sera utilisée comme guard. Dans cette fonction, on injecte les dépendances pourAuthService
etRouter
.On vérifie si l'utilisateur est authentifié en utilisant la méthode
isAuthenticated()
de l'instanceauth
. Cette méthode doit être implémentée dans le service d'authentification (AuthService
) pour déterminer si un utilisateur est authentifié ou non.Si l'utilisateur n'est pas authentifié (c'est-à -dire si
auth.isAuthenticated()
renvoiefalse
), on redirige l'utilisateur vers la page de connexion en utilisant la méthodenavigateByUrl('/login')
de l'instancerouter
. Ensuite, on retournefalse
pour indiquer que l'accès à la route protégée n'est pas autorisé.Si l'utilisateur est authentifié, on retourne simplement
true
, ce qui permet l'accès à la route protégée.
On l'applique au routeur:
ts
// ... code précédent
const routes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard], // Utilisation du guard
}
];
Vous pouvez également utiliser ce guard pour protéger plusieurs routes en utilisant un tableau de routes imbriquées, comme ceci :
ts
// ... code précédent
const routes: Routes = [
{
path: 'admin',
canActivate: [AuthGuard], // Utilisation du guard
children: [
{
path: '',
component: AdminComponent
},
{
path: 'users',
component: UsersComponent
}
]
}
];
Dans cet exemple, le guard AuthGuard
sera utilisé pour contrôler l'accès à toutes les routes enfants de /admin
, y compris /admin
et /admin/users
. Si l'utilisateur n'est pas connecté, il ne pourra pas accéder à aucune de ces routes.