Transcript from the "Protected Routes" Lesson
[00:00:00]
>> In this example we are going to talk about protected routes. And so this is a really valuable technique when you want to control access to a portion of your application. So for instance, imagine you had an admin section that you wanted to prevent somebody from going to, unless they had been properly authenticated.
[00:00:24] And so this is where we implement protected routes. And so we think of this as a guarded route, a protected route. And we have the ability to insert just a little bit of logic in the form of a route guard, to say yes or no. And so within our code, I am going to add in another path and we're going to just call this one garden, or rather let's call it protected.
[00:00:58] So this is a protected route, and we're going to give it a component of ProtectedComponent. And now what we're going to do is we are going to add in an additional property which is canActivate. And so this is pretty simple, it's can it activate true or false? And so, from here, we are going to add in, An AuthGuard, and so I'll show you what this looks like in a moment.
[00:01:34] But the point of this is, this AuthGuard is going to do really one of two things, it's going to return true or false. There's also a second and a half option that I'm going to illustrate inside of this particular demonstration, let me fix that typo there, and we are ready to go.
[00:02:00] So, I'm going to take off the AuthGuard first, I'm going to save it, we'll go into our code, and I just want to show you what this looks like. So, protected route example, if you can see this, click on the user icon. When we finish this, we'll see what this looks like, but here's the component.
[00:02:22] Now from here, I'm going add in or add back in this guard. And if we look in the guard, that this is nothing more than a class, surprise, welcome to Angular. And this implements a canActivate interface, which has one method that we have to implement, which is canActivate.
[00:02:49] Now, canActivate takes in two parameters, next and state. So, next is where is this going, and what is the state of the snapshot? And from here, there is a number of things that this can return, I'm not gonna get into that, what we care about here is boolean.
[00:03:15] And so, I'm going to, let's start with true, and what you're gonna see, hopefully, is that nothing changes. So I'm able to navigate freely to this protected route, no problem, but if I go and I set this to false, then I'll go from any other route to Protected Routes.
[00:03:46] And notice, I'm clicking on this but nothing is happening, it's just simply saying, you cannot go to this route. And if I stopped here, this could potentially be a subpar user experience. Because when you click on something, you expect that something is going to happen. And so this is where when I mentioned that there's a yet an additional option that we have.
[00:04:14] And that is, when you click on a route you should not go to, you have the ability to capture it and say this person's not authenticated, let's direct them to a place to do so. So within our AuthGuard here, we're going to update this. And so you notice here I'm injecting the AuthService as well as the router.
[00:04:41] And so what I'm going to do is when somebody hits this protected route and then they're directed to this AuthGuard, I am going to stop and I'm going to check, is this person authenticated? And if they are, carry on, if not, what we're going to do is something else entirely.
[00:05:09] So, the return for this is we're going to call this authService and isAuthenticated, and this is going to return true or false. But if they're not authenticated, we can take this a step further, and this is where good UX prevails. So within this, we're going to pipe off of this and we're going to tap.
[00:05:45] And so tap is the ability to tap into an observable stream and do something that would cause a side effect. And from here, we're going to capture the value being returned from this observable stream. So we're calling this authService isAuthenticated, and what we wanna know is are they authenticated, isAuthenticated?
[00:06:11] And then from here, we're going to say, if they're not authenticated, then we're going to take severe and dire actions. There will be consequences, and so if they're not authenticated, we're simply going to route them to the login page. So in this case, navigate by URL, and we're just going to send them to login, all right?
[00:06:44] And, If they are authenticated, we're just going to return this as to not break the string. And so now if they're authenticated, great, you can go on look your way, if not, we're going to send them to the login page. So if we go back into our application and I click on Protected Routes, if you can see this, then you're currently authenticated.
[00:07:17] But if I log out, then now you are directed towards the login page, but then if I go and try to navigate to this directly, You notice here that it thought about it for a second and then it sent me right back to the login page. And so what's happening is when I click that Logout button, I'm basically setting a property on the authService to I'm not authenticated.
[00:07:50] And which then prevents me from navigating directly to it because it hits that AuthGuard and redirects me back to the login page. But then once I click Login, then I can go back to Protected Routes and I'm able to do that freely and without any kind of problem whatsoever.
[00:08:13] So, just to review real quickly on this example, the big thing here is within the app-routing module. You simply add in a canActivate property which takes in a guard, and a guard is going to implement the canActivate interface. And so, from here it has a single function that's going to return true or false.
[00:08:41] Or for the sake of good UX and UI, that we can also perform some logic here to say, if this is false, maybe we want to do something for the user on their behalf. And so this is how you can protect a route in an Angular application.