Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Angular 3
  • Overview
  • Transcript

3.5 The Logged-In Guard

Even though our users can log in and log out of our web application, that actually doesn't provide any protection for any of our routes just yet. As you can see, if we try to navigate to the projects route, we can go there right away, even though going to the home route shows us that we are not logged in. So what we need to do is create a log in guard, if you will, that we can use to protect some of our routes. So let's go ahead and in our app directory, we're going to create a file called loggedIn.guard.ts. Let's start by importing Injectable, since this is going to be an injectable class. And of course, we get that from angular/core. We also need to import the CanActivate interface from angular/router. The CanActivate interface just says that we need to implement a CanActivate method, which our router can then use to decide whether or not a visitor should be allowed to view a specific route. Now of course, to help in making that decision, we will need our AuthService. So let's go ahead and import that as well. All right, so we will call the Injectable decorator. And then let's create our class underneath that. And we'll call this class LoggedInGuard. And of course, this is going to implement the CanActivate interface. And we'll just need one method in here, and that is canActivate. But of course we need to inject our auth service, so let's create a constructor for that. And as usual, it's constructor (private auth: AuthService). So CanActivate just needs to return a boolean. And this is going to be true if the given route is allowed and false if it's not. So we can just return this.auth.isLoggedIn. Remember, isLoggedIn is a simple function that returns a boolean true if the user is logged in and false if they are not. All right, now the rest of the work here can be done from within the app module file. First of all, let's go ahead and import our LoggedInGuard. And we'll import that from loggedIn.guard. All right, now since this is an Injectable, we need to add it as a provider to our module. So let's go ahead and add LoggedInGuard down here as a provider. And finally, in our routes here, whenever we have a route that we want protected, we just add an attribute canActivate. And this is an array, and we can pass a set of guards here. And we only need this one guard, so we will say LoggedInGuard. And now this projects route should be protected. All right, so now if we come back to the browser and we try and click our Projects link, we can see that we cannot actually go to the Projects page, we just do not navigate. However, if we go to the Login form and let's go ahead and log in as Jimmy, and now we try to navigate to the projects page, you can see that we are able to navigate to the projects page because we are logged in. There you go. We have our first protected route. If we log out and try to go to Projects, it just won't work. Excellent, so now we have our protected routes. And to be honest, that's just about as far as we need to go with our user features. Our users can log in and they can view their projects when they are logged in. So the next step is focusing on projects again. We already have our list of projects here, but now, let's add a form where we can create new projects. So we'll be focusing on that for the next couple of lessons.

Back to the top