Visualizing an Angular Guard?

In simple terms we can say that whether its Guard or a Pipe, Angular provide us with some interfaces, and if we want to make our class as a Guard or as a Pipe then our class can simply implement that interface and override the required method, that’s it!

Doing so will make our class inherit the properties of interface and will it an Angular Guard.

Angular provide many different Guard Interfaces like canActivate, canActivateChild, canDeactivate, resolve, etc.

canActivate: Checks if a user can access a specific route in Angular; the route is only accessible if the guard function returns true. So we can write a logic in it and based on conditions we will either return true or false.

canActivateChild: Its same as canActivate but apply the functionality on child routes.

canDeactivate: This guard in Angular determines whether a user can leave a specific route or component. It ensures that the route can only be exited after the guard function returns true, often used to confirm unsaved changes or other exit conditions before allowing navigation away from the route.

resolve: We can visualize this as it doesn’t make it mandatory to have true returned from guard function, rather its like we just run a code before moving to that route.

Now lets see syntax of these:

// canActivateChild

export class AuthGuard implements CanActivateChild {

  constructor(private router: Router) {}

  canActivateChild(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    // Simply a logic/code to check conditions and based on those either return true or false
    // For example, using authentication service, we can check that whether user is authenticated or not. If it is then we can return true and if it's not then simply redirect to login page.

  }
}

Now use it in route:

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'main',
    component: MainComponent,
    canActivateChild: [AuthGuard], // writing guard for child routes
    children: [
      { path: 'sections', component: SectionsComponent },
      { path: 'dashboard', component: DashboardComponent}
    ]
  },
  { 
    path: '**', 
    redirectTo: 'login' 
  }
];

Syntax of using canActivate, canActivateChild, or canDeactivate is same as above; but its bit different for resolve:

{ 
  path: 'home', 
  component: HomeComponent, 
  resolve: { data: DataResolver } 
}

Here DataResolver is the our class that implemented the Resolve interface