Guard dans Angular

Introduction

In this article, we will explore how to use guards with Angular 17. Guards allow you to protect routes and check certain conditions before allowing access to a specific route.

What is a Functional Guard?

A functional guard in Angular is a function used to intercept and potentially block navigation to a route. With Angular 17, you use CanActivateFn to create functional guards.

Code Example

Here is an example of a functional authGuard:

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  } else {
    router.navigate(['/login']);
    return false;
  }
};

Using the Guard

To use this guard, you must configure it in your routing module using provideRouter and withGuards:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withGuards } from '@angular/router';
import { AppComponent } from './app/app.component';
import { authGuard } from './app/guards/auth.guard';

const routes = [
  { path: 'protected', component: ProtectedComponent, canActivate: [authGuard] }
];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withGuards())
  ]
}).catch(err => console.error(err));

Code Explanation

• CanActivateFn: A type representing a guard function.
• inject: Function to inject dependencies like services.
• Router: Routing service to navigate to other routes.
• authGuard: Guard function checking if the user is authenticated.

Conclusion

Functional guards in Angular 17 provide a flexible and powerful way to protect routes and manage permissions. They are particularly useful for tasks such as authentication and access control.

For more details, see the official Angular documentation on guards【20†source】【22†source】【23†source】.

The above is the detailed content of Guard dans Angular. For more information, please follow other related articles on the PHP Chinese website!