Angular Route Guard, CanDeactivate, and Auth Guard

If you are developing an Angular application, you may want to restrict access to certain routes, prevent users from leaving a page with unsaved data, or protect certain routes based on user authentication. In this tutorial, we will cover Angular route guards, CanDeactivate, and Auth Guard and how to implement them in your application.

What is an Angular Route Guard?

An Angular route guard is a service that is used to control the access to a certain route. It can be used to prevent unauthorized users from accessing certain routes, check if a user is allowed to leave a certain route, or perform additional checks before allowing access to a route.

CanDeactivate in Angular

CanDeactivate is a guard that is used to prevent users from leaving a route with unsaved data. It is often used in forms to prompt the user before they navigate away from a page with unsaved changes.

Auth Guard in Angular

Auth Guard is used to protect certain routes based on user authentication. It can be used to prevent unauthorized users from accessing certain routes or to redirect them to a login page if they are not authenticated. This is often used in applications that require users to be logged in to access certain features or pages.

Implementing Route Guards in Angular

To implement route guards in your Angular application, you will need to create a guard service that implements the CanActivate, CanDeactivate, or CanLoad interface, depending on the type of guard you want to implement. You will then need to add the guard to the routes in your application to control the access to those routes.

Here is an example of how you can implement a route guard in your Angular application:

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable | Promise | boolean | UrlTree {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      return this.router.parseUrl('/login');
    }
  }
}

Conclusion

Route guards, CanDeactivate, and Auth Guard are important features of Angular that can help you control the access to certain routes, prevent users from leaving a page with unsaved data, and protect certain routes based on user authentication. By implementing these guards in your Angular application, you can ensure that your application is secure and that users have a smooth and seamless experience.