Why Route guards (canActivate, canDeactivate) in Angular? - Purpose & Use Cases

The Big Idea

What if your app could stop users from making mistakes before they happen, all by itself?

The Scenario

Imagine building a website where users can visit many pages, but some pages should only be seen if they are logged in or have special permission. You try to check these rules manually every time someone clicks a link or tries to leave a page.

The Problem

Manually checking access on every page is tiring and easy to forget. Users might sneak into pages they shouldn't see, or lose their work if they leave a form without warning. This makes your app unreliable and frustrating.

The Solution

Route guards like canActivate and canDeactivate automatically check if a user can enter or leave a page. They keep your app safe and user-friendly by stopping unwanted access or warning about unsaved changes.

Before vs After

✗ Before

if (!user.isLoggedIn) { alert('Access denied'); redirectToLogin(); }

✓ After

canActivate() { if (user.isLoggedIn) { return true; } else { redirectToLogin(); return false; } }

What It Enables

Route guards let you control navigation smoothly and securely, improving user experience and protecting sensitive pages effortlessly.

Real Life Example

Think of an online shopping site where you must log in to see your cart (canActivate) and get a warning if you try to leave the checkout page without finishing (canDeactivate).

Key Takeaways

Manual checks for page access are error-prone and hard to maintain.

Route guards automate permission checks before entering or leaving pages.

This keeps apps secure and users informed about unsaved changes.