CanActivate Route Guard - Angular (Tutorial #24)
37.3 هزار بار بازدید -
4 سال پیش
-
CanActivate Route Guard in Angular
CanActivate Route Guard in Angular - Tutorial no. 24
Angular provides lots of features and ready-to-use services which allow seamless development of awesome web application.
And protecting routes with Guards are one of the important and useful feature.
Use this link to share this video : Share this video: CanActivate Route Guard - Angular (Tu...
In our previous videos we have already learnt about Routing, Nested Routing and Parameterised routing.
Nested Routing: Nested Routes - Angular (Tutorial #22)
Router Parameters: Route Parameters - Angular (Tutorial ...
Routing: Routing - Angular (Tutorial #20)
If you see our current project we can notice that we can navigate to any route but sometimes you need to control access to different parts of your app for various reasons. Some of which may be:
1) the user is not authorized or authenticate to navigate to the target component.
2) Maybe you should fetch some data before you display the target component.
3) You might want to save pending changes before leaving a component.
You might ask the user if it's OK to discard pending changes rather than save them.
You add guards to the route configuration to handle these scenarios.
Guards in angular are interfaces which can tell the router whether or not it should allow navigation to a requested route.
So If all guards return true, navigation will continue. If any guard returns false, navigation will be cancelled.
Guards return either true if the user can access a route or false if they can’t.
They can also return an Observable or Promise that later on resolves to a boolean in case the guard can’t answer the question straight away,
for example it might need to call an API. Angular will keep the user waiting until the guard returns true or false.
There are five different types of Guards:
CanActivate
Checks to see if a user can visit a route.
CanActivateChild
Checks to see if a user can visit a routes children.
CanDeactivate
Checks to see if a user can exit a route.
Resolve
Performs route data retrieval before route activation.
CanLoad
Checks to see if a user can route to a module that lazy loaded.
For a given route we can implement zero or any number of Guards.
CanActivate Route
This class implements the CanActivate interface by implementing the canActivate function.
When canActivate returns true, the user can activate the route. When canActivate returns false, the user cannot access the route.
In the above example, we allow access when the user is logged in.
canActivate can also be used to notify the user that they can't access that part of the application, or redirect them to the login page.
Guards are implemented as services that need to be provided so we typically create them as @Injectable classes.
Angular Tutorial Series:
Introduction- Angular (Tutorial #1)
Follow me on:
►Youtube : nishasingla
►Facebook : Facebook: AngularJS4Beginners
►LinkedIn : LinkedIn: nishasingla
Angular provides lots of features and ready-to-use services which allow seamless development of awesome web application.
And protecting routes with Guards are one of the important and useful feature.
Use this link to share this video : Share this video: CanActivate Route Guard - Angular (Tu...
In our previous videos we have already learnt about Routing, Nested Routing and Parameterised routing.
Nested Routing: Nested Routes - Angular (Tutorial #22)
Router Parameters: Route Parameters - Angular (Tutorial ...
Routing: Routing - Angular (Tutorial #20)
If you see our current project we can notice that we can navigate to any route but sometimes you need to control access to different parts of your app for various reasons. Some of which may be:
1) the user is not authorized or authenticate to navigate to the target component.
2) Maybe you should fetch some data before you display the target component.
3) You might want to save pending changes before leaving a component.
You might ask the user if it's OK to discard pending changes rather than save them.
You add guards to the route configuration to handle these scenarios.
Guards in angular are interfaces which can tell the router whether or not it should allow navigation to a requested route.
So If all guards return true, navigation will continue. If any guard returns false, navigation will be cancelled.
Guards return either true if the user can access a route or false if they can’t.
They can also return an Observable or Promise that later on resolves to a boolean in case the guard can’t answer the question straight away,
for example it might need to call an API. Angular will keep the user waiting until the guard returns true or false.
There are five different types of Guards:
CanActivate
Checks to see if a user can visit a route.
CanActivateChild
Checks to see if a user can visit a routes children.
CanDeactivate
Checks to see if a user can exit a route.
Resolve
Performs route data retrieval before route activation.
CanLoad
Checks to see if a user can route to a module that lazy loaded.
For a given route we can implement zero or any number of Guards.
CanActivate Route
This class implements the CanActivate interface by implementing the canActivate function.
When canActivate returns true, the user can activate the route. When canActivate returns false, the user cannot access the route.
In the above example, we allow access when the user is logged in.
canActivate can also be used to notify the user that they can't access that part of the application, or redirect them to the login page.
Guards are implemented as services that need to be provided so we typically create them as @Injectable classes.
Angular Tutorial Series:
Introduction- Angular (Tutorial #1)
Follow me on:
►Youtube : nishasingla
►Facebook : Facebook: AngularJS4Beginners
►LinkedIn : LinkedIn: nishasingla
4 سال پیش
در تاریخ 1399/02/20 منتشر شده
است.
37,324
بـار بازدید شده