Router Guard in Angular

Route Guards determine whether to allow or deny navigation within Angular application.

There are 4 types of routing guards in Angular:

• CanActivate Determines if a route can be activated
• CanActivateChild If route children can be activated
• CanLoad If lazy loaded child routes can be loaded.
• CanDeactivate Determines if the user can navigate away from route url

You attach a route guard to a route while defining the route using the route type.For example you can attach a route guard called DetailsGuard of type canActivate as:

const routes: Routes = [{ path: 'details',component: DetailsComponent,canActivate: [DetailsGuard]}

You define the CanActivate guard as:

@Injectable()
export class DetailsGuard implements CanActivate {
constructor(private router: Router) {}
canActivate():boolean {
//logic to determine true or false value
return true;
}
}

 

 

Follow on: