34. Implement Auto Logout Functionality in the ngrx state Angular Application

hi friends this is leela welcome to my channel now in this video we will try to see about the auto login and also we'll implement the auto logout feature also we'll try to implement in this video now where we have stopped so now here in the earth effects here if you go here we have stopped right constant user we got the user data and what we can do here nothing which we can do so i can i can remove this one okay and i can do the merge map why because so we it requires an observable and here i can return of login success right login success of we need to send the user so we have sent the user successfully and now if i try to do the login here if i try to do the login test retest.com and one two three four five six and if i click on login if i click on login problems record i think there was a stream observer something it is saying okay written observable let's try to see here it is building let's wait yeah it's built successfully now we will try to see the login so here see logout automatically is working why because uh we have already the data in the session storage now like let's try to delete this one okay let's try to refresh this one now what i will try to do is i'll try to implement the login test test.com and one two three four five six and if i click on login here i am able to log so logout is appearing and here the user data is getting stored and if i try to refresh this one so logout function is implemented automatically see so now we are able to successfully implement the logout function login functional data login functionality now what we will try to implement is the logout thing so the here the logout how we can implement is let's go to the header component.html here is the header component.html and here i can implement something like click is equal to on logout okay so i can implement on logout and here for this on logout we can send dollar event for this one so to prevent the default action and here i can go into this one and here i can implement on logout event of type event okay so here what i can do here i can remove this all service there is no need of odd service and there is no enough router why i injected i don't know okay so now here i can do this dot um sorry first let's do the even dot prevent default even dot prevent default and let's try to create a logout action in auth actions what i will try to do is here export constant logout underscore action is equal to auth page logout okay now here i will i will i will do constant log out or i will keep it as auto log out okay auto logout is equal to create action of logout underscore action okay actually this one is not a lot of logo for the confusion checkers for not getting confused i am keeping auto logo and now for this auto logout let's write the reducer also why because we need to make the whenever we call this on auto logout okay when we are calling this auto logout when we are calling this auto logout so we will get the state and we will return the state return the state and we need to make the user null so that automatically it got uh a state user got deleted from the state now let's go to the header component.ts now here we need to call this dot store dot dispatch auto logout we can call this auto logout directly so now when we call this auto logout let's write the effect for this one so whenever this auto logout is called so here i can write log out dollar is equal to create effect okay so now here it will be having so we will keep dispatch false we will not dispatch any action here so i can create dispatch of false okay now dispatch of false here we need to what we need to do is return this dot action dot pipe off of type of so log out whenever the user calls auto logo auto logout okay comma map we need to use the map okay we will be getting the action here so this is the this is the type we'll be getting so now what we need to do here so here we need to write so here i can write this dot auth service dot logout okay i will call this in the odd service logout so in this r service logout what we will try to do is let's go to the earth service and here i will implement the logo scenario log out so what i need to do first i need to remove the local storage local storage dot remove item off what i can do here user data and now what i can do if this dot timeout interval is there means so now i need to clear clear timeout of this dot timeout interval and what i need to do i need to make out make this dot timeout interval as for null this dot timeout interval is equal to null so that it will be removed and here what i need to do that's it right so i removed the local storage i removed the timeout interval that's it i think this could be sufficient i think now what i need to do so here it is finished so now auth effect it called the log out it will do all the necessary actions okay it will clear the time mode it will create the location and all those things and now we can navigate to this dot router dot navigate to the ah simply you can navigate to the auth we can say so that's it right so now this is finished now one thing is remaining in the art service when you come to our service if you go to the r service here log out we have called but here in the logger functionality we need to call we need to do the auto logout or anything so here i can write the disk dot store so is the store injected in this heart service where is this one yeah store is injected in that service just we can call this dot store dot dispatch of auto logout right auto logger we can call it directly that's it finish so automatically it will call so now let's try to see the output so here it is working fine what is happening here the app state yeah everything is fine in the header component.ts okay in the header component.ts so here so this is common for me in my editor i'll be reading this type of errors okay so now this one is getting executed let it exit again it's coming error at the component rts auto logo does not found okay so auto logo does not form why it is not found auto logo is not injected at the top auth actions it is their router there is no need of router okay the header component is 58 export was not uh okay so auth actions why it is not phone export construction auto logo is there automatically yeah now this one is compiled successfully now if i try to see the output so now let's try to check the output here if i click on refresh so auto logo t is there still if i click on logout see it went to the auth login and logout has been successful happened and here also user data is removed successfully so now we have implemented the logout feature now if you try to see i went to the post okay i'm able to see the here if i try to log in here okay if i try to test at test.com and one two three four five six if i click on login here it is fine so if i refresh this one login logout is present here so that means the user is logged in so without any problem the user is logged in now if you go to the post here okay if i try to refresh this one see what is happening here see it is going to the home page it should stay in the posts only but it is automatically going into the home page so why is this happening here okay why is this happening here so the thing what is happening is here if you go to the earth effects this all comes under earth effects why what is the thing we are doing here when we are doing the auto login we are calling the login success so here when we are refreshing the page that means it is calling the auto login feature and it is going to the login success in the login success what it is happening so if you go to the login redirect okay whenever the login success action is called login redirect will will call and here it is navigating to the home page so that is the reason it is happening so one thing what we can do is here for remedy now what we can do is so let's go to the auth data action and here for the login success i can make one redirect of type boolean okay so if it is true means then redirect or otherwise no so let's go to the auth fx so wherever we are calling the login success here only we'll be calling the login success and here in the user i can call this is the login right so i can make redirect of type true okay and another one what i where i need to use this in the sign up also we need to use so let's go to the auth actions and i can make it here oh it is a boolean rate yeah now here in the sign up start also not in the sign up success also i will make this one as redirect of boolean okay now in auth effects we can call the login redirect i can check that if action dot sorry if action dot redirect is there okay if it is true only then navigate or otherwise don't need to navigate so this is one condition we will write and here in the sign up start if you go here in the user i can tell redirect of type true okay now here if you go i think it should be okay yeah okay and in the auto login in the auto login we should tell that redirect of type false okay in the auto login we should not redirect and in the logout anywhere we are not calling anything so now if i try to execute this code so if you try to see the execution yeah it's working fine again it's executing so let it execute yeah it's compiled successfully now let's try to see the output here yeah okay we got it and i clicked on post if i try to refresh it here see it stays in the post only it says stays in the post if i go to the counter and if i try to refresh so the user is logged in successfully and also the page we are staying so wherever the page we are refreshing city staying like that only if i click on log out if i try to log it again and if i click one two three four five six and if i click on login now it will go to the home page automatically if i if i do like this so it will stay in the page wherever the page is there if i refresh the the page will stay there only okay so we have successfully implemented the login functionality and also the logout functionality also we have implemented i hope you understood about the angular engineering state management how to manage the state you i hope you understood this thing and now what we will try to do is we will try to do the posts also so same thing how we have did the state management we will try to get using the database then after we can close this angular and grx thing okay so if you have any doubts or any suggestions please post the comments below to this video and if you like this video please do support me by subscribing to my channel thank you

Channel: Leela Web Dev

Views: 8,701

Keywords: angular, angular ngrx, angular tutorial, angular input output, angular emit event between components, angular emitter, angular eventemitter, angular eventemitter tutorial, ngrx store, angular state management, ngrx store angular, ngrx selectors, ngrx tutorial, selector props, learn ngrx angular, ngrx forfeature, ngrx store tutorial, ngrx effects, angular ngrx effects

Id: Ha0xC0v7LgQ

Length: 12min 36sec (756 seconds)

Published: Wed Dec 30 2020