CanActivate Route Guard - Angular (Tutorial #24)

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 Guar...
In our previous videos we have already learnt about Routing, Nested Routing and Parameterised routing.
Nested Routing: • Nested Routes - Angula...
Router Parameters: • Route Parameters - Ang...
Routing: • Routing - Angular (Tut...
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 ...
Follow me on:
►RUclips : / nishasingla
►Facebook : / angularjs4beginners
►LinkedIn : / nishasingla

Unfortunately I have just one like button or else I would have liked million times to this playlist for such an easy explanation.

[@kajalamalla8019]

I love the way of teach is very familiar to me ,your my coding god

[@arvindkumarchaurasia8237]

A very simple and straight forward way of explaining, well done ✌✌

[@myvue4587]

Awesome video, after a long time........ still we are waiting for upcoming videos......thank you so much for helping angular developers by making videos

[@NishaSingla]

It's my pleasure

[@pavandixit442]

I love the way You Explain

[@NishaSingla]

Yes, soon

[@rahulrahul6259]

A very simple and great way of explaining things

[@konadeepak9443]

Hi Nisha, please try to make complete Angular topics and upload. The way of your presentation is very much understandable to every one. Thank You.

[@NishaSingla]

thanks. I will try to upload more topics

[@priyankaravichandran851]

well explained , really awesome , can you please upload more about the routers , other more concepts , ES6 FEATURES

[@shitalunde9528]

Hello, your video's are really helpful. Thank you so much for this great job. Can you please make series on ngRx please it's request And thanks in advance

[@nickoletan]

Thanks, you save my life

[@NishaSingla]

You’re welcome

[@RZ009]

More power to you !!!

[@NishaSingla]

😀

[@boddulasrikanth6047]

Thank you for clear explaination :)

[@NishaSingla]

You’re welcome

[@mannumahto8160]

Great explanation

[@NishaSingla]

Thank u 🙏

[@shraddhamarathe1444]

Awesome explanation. very crisp and clear. :) Thanks !! I just have one doubt that can we also pass parameters to guards ??

[@lokeshnallapureddy7208]

Thankyou soo much nisha ma'am for updating this video on my request soo early and I can't know wt can I say more than thankyou

[@NishaSingla]

My pleasure 😊 Keep Learning

[@bachubrahmam3811]

Thank you so much . It was clean and understabl.

[@NishaSingla]

You're welcome!

[@IqbalAhmed-qk5ix]

Awesome
superb
Thank u so much mam

[@NishaSingla]

Thanks for liking

[@Stylehackswithpal]

Hey, Could you please make video on NgModules concept, Mock Interview Questions. It would be a great help. Because I am like fun of your teaching way and learning a lot from you. Thank you so much for videos.

[@NishaSingla]

Thanks Payal 😀😀

[@Aaaaa_kkkk]

Thank you so much very helpful

[@NishaSingla]

You’re welcome 😊

[@TechAahar]

Really awesome and well explained , Thank you for sharing with us.

[@jeckyanand717]

Thank you for this video. My angular learning was kind of stuck in middle because your angular playlist is very basic and incomplete.
Pleaseease update this. People like me is waiting badly.

[@NishaSingla]

I will try my best to complete this series. Thanks for liking.

[@Jacks7468]

@@NishaSingla Please update the playlist of your angular tutorials with the latest version and changes

[@31sar]

Please make videos for Angular projects

[@andreluizguimaraes3786]

Nisha, first of all, thanks for this video (I saw also the another one about the CanDeactivate, and it helped me a lot!) Please, I would like to know if the resource presented on this video prevents also to navigate to another URL that the user put manually on the browser, or mouse click on other short cuts? Thanks in advance. Best regards.

[@anshvarun653]

Thank you!!! Saved my day :)

[@NishaSingla]

You're welcome!

[@SalmanAli-gd3tm]

Awesome video very helpful for me And I am waiting for realtime project. And when will you start realtime project any class or video ?

[@kalladhamodar4989]

Hii ur explantion is awesome,,, is services are compulsary link on providers(modules.ts)?

[@manojnandhan8677]

Thanks

[@NishaSingla]

Welcome

[@Sharwankumar-rz4ft]

good work

[@NishaSingla]

Thank you! Cheers!

[@NishaSingla]

*Watch these videos as well*
👍
Routing: ruclips.net/video/E8QOJ822Ta4/видео.html
Nested Routing: ruclips.net/video/JfNLM0hq_uk/видео.html
Named Router Outlet: ruclips.net/video/ev6z6B3GVlw/видео.html

[@abhinaygalipally9100]

Hi Nishna Singla can you expalin after sucessful authentication when am trying to hit /login,/register i should not navigate to login ore register can i know the solution

[@bharathgorental4928]

this is awesome, but Can you please tell me If I want to restrict a user from a specific HTML element / typescript method/ function inside the component(some functions/ elements should be accessible but some should not), thank you.

[@ABHISHEKKUMAR-ne3rk]

Pls,make video on angular login with jwt token

[@NishaSingla]

Sure

[@ankitg2361]

CanActivate is not holding till http api response ...so could u help how do we hold till response

[@surabhisahu1231]

Hello mam how can I pass user object to isLoggedIn() method as an argument?
When I am doing that in auth.ts file it will showing some error please help me maam

[@_falgunip]

what if we hit localhost:4200/users directly from address bar?

[@kyleryxn]

In which video of yours do you go over JWT tokens?

[@kushalbaldev8490]

If we move back in browser after logout we are able to move back to previous page.
PS I clear every data while one clicks logout.

[@Sandeep-lb7wb]

Can I expect videos on all lifecycle hooks and router events

[@NishaSingla]

I will upload videos on these topics soon. Thanks

[@vishalpal8957]

i have two doubts i hope you will see this comment and reply soon
1: if you have already added injectable ({ providedIn: 'root' }) then it is not necassary to add it in the app module as per my knowledge then why did u do that?
2: what is the use of the properties which "canActivate" consists the Activatedroutesnapshot and the Routestatesnapshot. cause as far as i know they are also very important i do not know why yet but i read this somewhere.

[@mahavirsinhpadhiyar864]

Can we hide the menu navigation using canActivate? I have used the same in my application but I have to refresh the page to see the effect after logout.

[@NishaSingla]

Can you please explain a bit your requirement, where exactly you need this ?

[@mahavirsinhpadhiyar864]

@@NishaSingla What I am asking is can we show and hide the Menu bar according to isActivate function so no need to show if it is not allow.

[@NishaSingla]

@@mahavirsinhpadhiyar864 Ideally Guards are meant to use to control route accessibility . But you can try by setting any flag (using any global state or localStorage) which can be set in canActivate Method so that Menu can toggle as per the value set in this function.

[@mahavirsinhpadhiyar864]

@@NishaSingla ok thank you so much

[@NishaSingla]

@@mahavirsinhpadhiyar864 You're welcome

[@muralimanohar2514]

please make more tutorials

[@CristianRomero-up1nj]

put a example condition plz

[@pardhasaradhinaidu602]

We want angular jwt authentication in deep

[@NishaSingla]

I will try to upload it soon. Thanks

[@jayakumar2927]

Good one can you share the code