Route Guards
Les "Guards" permettent de contrôler l'accès à une "route" (e.g. autorisation) ou le départ depuis une "route" (e.g. enregistrement ou publication obligatoire avant départ).
Les "Guards" ne doivent en aucun cas être considérés comme un mécanisme de sécurité.
La gestion de permission des accès aux ressources doit se faire au niveau des APIs HTTP : https://blog.wishtack.com/api-rest-bonnes-pratiques-et-securite/.
Les "Guards" servent à améliorer la "User eXperience" en évitant par exemple l'accès à des "routes" qui ne fonctionneraient pas car l'accès aux données serait rejeté par l'API.
Configuration
Les "Guards" sont ajoutés au niveau de la configuration du "Routing" :
1
export const appRouteList = [
2
{
3
path: 'cart',
4
loadChildren: './views/cart/cart-routing.module#CartRoutingModule',
5
canActivate: [
6
IsSignedInGuard
7
]
8
},
9
{
10
path: 'signin',
11
component: SigninViewComponent,
12
canActivate: [
13
IsNotSignedInGuard
14
]
15
},
16
{
17
path: 'profile',
18
component: ProfileViewComponent,
19
canDeactivate: [
20
IsNotDirtyGuard
21
]
22
}
23
]
Copied!
CanActivate
CanActivateUne "Guard" d'activation est un service qui implémente l'interface
CanActivate.Ce service doit donc implémenter la méthode
canActivate.
Cette méthode est appelée à chaque demande d'accès à la "route" ; elle doit alors retourner une valeur de type boolean ou Promise<boolean> ou Observable<boolean> indiquant si l'accès à la "route" est autorisé ou non.Il est donc possible d'attendre le résultat d'un traitement asynchrone pour décider d'autoriser l'accès ou non.
is-signed-in.guard.ts
1
@Injectable({
2
providedIn: 'root'
3
})
4
export class IsSignedInGuard implements CanActivate {
5
6
constructor(private _session: Session) {
7
}
8
9
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
10
return this._session.isSignedIn();
11
}
12
13
}
Copied!
En cas de refus d'accès, il est possible de rediriger l'utilisateur vers une autre "route" "manuellement" en injectant le service "Router" par exemple :
1
constructor(private _router: Router,
2
private _session: Session) {
3
}
4
5
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
6
7
const isSignedIn = this._session.isSignedIn();
8
9
if (isSignedIn !== true) {
10
this._router.navigate([...]);
11
}
12
13
return isSignedIn;
14
15
}
Copied!
CanDeactivate
CanDeactivateLes "Guards" de désactivation sont couplées aux composants car elles doivent communiquer avec le composant pour établir leur décision d'accès.
Une "Guard" de désactivation est un service qui implémente l'interface
CanDeactivate.Ce service doit donc implémenter la méthode
canDeactivate.
Cette méthode est appelée à chaque fois que l'utilisateur souhaite quitter la route (clic sur un lien ou déclenchement automatique) ; elle doit alors retourner une valeur de type boolean ou Promise<boolean> ou Observable<boolean> indiquant si l'accès à la "route" est autorisé ou non.Contrairement au "Guards" d'activation, cette "Guard" prend en premier paramètre l'instance du composant. C'est pour cette raison que l'interface
CanDeactivate est générique.La "Guard" appelle la méthode
isDirty du composant ProfileViewComponent pour décider d'autoriser ou non l'utilisateur à quitter la route.Malheureusement, la "Guard" est fortement couplée avec le composant
ProfileViewComponent.1
@Injectable({
2
providedIn: 'root'
3
})
4
export class IsNotDirtyGuard implements CanDeactivate<ProfileViewComponent> {
5
6
canDeactivate(component: ProfileViewComponent,
7
currentRoute: ActivatedRouteSnapshot,
8
currentState: RouterStateSnapshot,
9
nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
10
return component.isDirty();
11
}
12
13
}
Copied!
1
export class ProfileViewComponent {
2
3
isDirty() {
4
return false;
5
}
6
7
}
Copied!
Pensez à associer la "Guard" à une interface plutôt qu'au composant directement.
1
export interface IsDirty {
2
isDirty(): boolean | Observable<boolean>;
3
}
4
5
@Injectable({
6
providedIn: 'root'
7
})
8
export class IsNotDirtyGuard implements CanDeactivate<IsDirty> {
9
10
canDeactivate(component: IsDirty,
11
currentRoute: ActivatedRouteSnapshot,
12
currentState: RouterStateSnapshot,
13
nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
14
return component.isDirty();
15
}
16
17
}
Copied!
1
export class ProfileViewComponent implements IsDirty {
2
3
isDirty() {
4
return false;
5
}
6
7
}
Copied!
Dernière mise à jour 2yr ago
Copier le lien