Angular Guards | Angular Auth Guard | Angular Canactivate

in this video you will learn how to protect your pages inside angular by using angular words [Music] and just from the beginning I must tell you the truth you can't really protect your application in client side which actually means it doesn't really matter what we're writing inside words if somebody really want to break our code and accept the page it is totally possible this is why you must do all possible backend checks and allow people to access your API only when they have correct login which actually means your application must be first save on the backend and we have words inside angular just so user accidentally don't accept the page it is not to make your application bulletproof so let's try to protect our Pages now as you can see here I already prepared a small angular application we first of all have here a home page and a private route and when I'm jumping to slash private I have here content I am a private shout so inside angular to protect our routes we're using words what is a word this is just a class with one method and this method will be called when we're trying to access our page and if this method returns true then everything is good and our user can accept this page if this method returns false then we won't accept this page this is why let's create our word now and in order to do that inside source app I will create auth Dash word dot service dot TS and here we're creating just a normal service so I have on the top injectable and then an expert so we're expert in here our class house word service and now here is the most interesting part where writing here implements can activate and instantly we're getting an error class out square service incorrectly implements interface can activate property can activate is missing which actually means when we're creating a word we must Define inside this method can activate which will return true or false this is where he let's create a method can activate and we don't really need in our case to get access to some parameters inside and this method must return for us a Boolean which actually means now here I will simply write return true just to test it our next step will be to register our service and we are doing it in our app module test so here inside providers we can add our owls word service and the last step that we must do we must call this outward service on some route and actually we want to protect our private shout this is why we're jumping inside app private here is private module and here is our route with path and component this is where here we must add can activate and actually this is an array and inside we are providing the list of our words in our case it will be ours word service so let's check if it's working as you can see here we don't have any errors let's jump in browsing and here I am home page and they can access private I'm seeing here I'm private road and Diamond slash private this happens because inside our outward we return true if we will return here false then it won't be possible as you can see here I am on the home page and I can't jump to the private it simply does not happen and I can't write here slash private it also won't work I am directly redirected back to the home page but obviously in the real application we're not just writing inside written false or return true in the real application you will fetch current user from the back end and everything will be asynchronously and an asynchronous case we will look in a second because it is more complex if you have some simple case with your data on the client then you can make it synchronously and synchronous version works exactly like viral we have can activate here we're returning Boolean and inside we're writing our Logic for example here we can check the token inside local storage and actually in the real production application it is not enough to be sure that user can accept this page but for our case it can be sufficient so we can write here if localstorage dot get item and here we're providing a token so if we got that then we're returning true another case we are returning false let's check if it's working I am jumping to the private and nothing happens because actually we're returning false but if here inside our application we'll jump into our local storage and we're creating new key with the name token and any value then it will work by reloading the page and jumping to the private and I'm on the private route it happens because we got invasive condition and we're returning here true but again in the real application everything is asynchronous and we're working with API and this code is not really something that you will use instead of this will fetch the user on the initialize of our application and as you can see here I already prepared for us current user service and this is just a service with one Behavior subject as you can see we have here current user dollar and here inside we're storing either this object with a d and name which means this is our current user null or undefine it and by default we're setting here undefined by that it means that we didn't fetch user yet and where in the state where we don't know if we're logged in or not so we are waiting to get this information I also have here Set current user and this is exactly what we will call on initialize of our application and actually here I simplified it we're not making an API call and here I am using again local storage get item but after this I am either writing inside current user stream this object with ID and name full or I am right in there now and actually now means that that we already got current user and we're sure that we are not logged in current user next with user information means that we are logged in and in the real application you will have something like this HTTP get you are getting current user and then you are doing exactly the same you are setting current user next with your user data and this is happening inside this Set current user so when we need to call this method it is happening on initialize inside app component so here first of all we must inside our Constructor inject our service so here we have our current user service and this is current user service now inside our engine unit we can just call this current user service dot Set current user so in the real application this method will make an ePay call to get current user to the API and set it inside the service in our Stream So now if we are getting this token then this stream will be updated with user data or with now and now in our whole application we're not working with local storage we're checking this stream inside user service because this is exactly our state for the whole application and this is exactly what we want to use inside our outward this is why I want to comment this code and right here in the synchronous word and this is what you will typically use inside real application so we can write here can activate and I'm getting back here not just Boolean but observable of Boolean which means we are working here with this stream of data now here we want to access our current user service this is why we must inject it so here is our current user service and this is current user service and now inside our can activate we can simply return this current user service Dot and here we have our stream current user and we can subscribe to it this is why here let's rate pipe and inside we have map and inside map we're getting our current user so here we can check if we don't have current user so if not current user then we want to make router navigate so we want user to jump to the home page and this is why inside our Constructor we must inject here a router so here is our router which is a router and now here if we don't have current user we can call this dot router dot navigate by URL and here we're providing slash which is our home page and also we must return here false and this is important because our method always must return an observable of the Boolean if you won't write this line it won't be correct and after our if here we want just to return true because in this case we know okay user is logged in we don't need to do anything we can access this page but actually this code has a problem with that as you can see here inside our map we are getting current user and it can be either an object null or undefine it and we don't need to see here and Define it because it will ruin all our checks because if user undefined then we'll get into this if and when navigating but actually we didn't fetch our current user yet this is why we must eliminate and Define it and simply wait inside the observable for now our current user object this is by here inside our pipe we want to use filter and actually inside filter we have current user and it can be either now undefined or use the object this is where here we want to check that our current user does not equal undefine it which actually means here inside our map we successfully eliminated and defined it and our connectivate will wait until we will get inside this map and navigate user if we need to but in order to make it more realistic let's jump inside our app component TS and right here set timeout which actually means we're getting our data after two seconds and let's see how it will look like so here I have a set timeout and inside I am setting current user as you can see I don't have any errors and let's jump to browser here we're inside home page and then jump into the private and as you can see it was still laid by two seconds by that because they actually were hanging in this state of can activate until our observable is fulfilled which means if our observable is never fulfilled we will never see the page but I'm clicking now inside private and I'm directly inside private shroud it is happening because our estate is already there and we're checking it but if I'm reloading the page and then jump into the private where wait into seconds until we're getting data and now let's try to remove from our application from our local storage token I'm reloading the page and I'm clicking on the private and as you can see I can't access it doesn't matter how long I wait I'm simply redirected directly to the home page when I'm clicking here because I'm getting null from the stream and actually if you are interested to know how to build pagination by yourself inside the angular make sure to check this video also

Channel: Monsterlessons Academy

Views: 6,596

Keywords: angular auth guard, angular guards, angular route guard, angular canactivate

Id: 6vZSMVxnnTE

Length: 11min 27sec (687 seconds)

Published: Mon Jan 30 2023