7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.7 Using Route Guards

In this lesson you'll learn how we can protect routes using route guards. There are a number of different route guards that we can choose from, but in this lesson we'll focus on the canActivate guard.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


6.7 Using Route Guards

Hi folks, in this lesson we're going to take a look at route guards. Route guards are incredibly useful for testing whether or not a route can be loaded or unloaded, and this is exactly what we need right now. At the moment, as you might have noticed while we have been testing, one big problem that we have is that we can navigate straight to the game component without going to the start component first. So, we are currently on the start component. And if we click the button without entering a name, the validation will stop us navigating to the game component. But if we come up to the URL here, and if we just try to navigate straight to the game component, that works and we get an error in the console, so that's not great. It would be much better if users couldn't go to the game component if they haven't come from the start component. This is exactly the kind of thing that route guards are for. Let's see how we can use one to fix our current predicament. There are a number of different types of guards that we can use including CanActivate, CanDeactivate, CanActivateChild and CanLoad. We can use the CanActivate guard. Let's get started. Guards are typically implemented as services that we can inject into other services or components. Let's generate one now. We can put the new service in the _services folder because technically it is a service. We could create an _guards folder or similar if we were going to have a lot of them, but we aren't. So let's just put it in the generic services folder. We'll need to import the actual guard that we want to use. And in this case that's going to be the CanActivate guard. We'll also need the PlayerService here. The PlayerGuardService class will need to implement the CanActivate interface. Great, now, in order to implement the CanActivate interface correctly, the class should have a CanActivate method. We should also inject the PlayerService into the constructor. So Angular will invoke the CanActivate method to check whether or not the route can be activated. And the method should return either truth if the route can be activated or false if it cannot. We can just check the length of the players array in the PlayerService. If it's less than 2, we know the game component has not been accessed correctly. So now to use our new guard, first of all, we'll need to import the guard into our route module. And we can then add the service to the providers array. Now we need to add the guard to our root configuration, which is in app.routes.ts. Again, we'll need to import the guard service first. Route objects have a property called CanActivate, they have properties for all of the different guards. So, we can add our guard using this property and we want to add it to the game route The value of the canActivate guard property is an array. Okay, so let's test things out. So we're currently on the start screen. Let's see if we can navigate directly to the game screen. We can't go straight to the game screen now. The browser just stops loading at the root of the site. Good, so the guard is working. We can no longer go straight to the game component. We just need to arrange things so that the user is redirected to the start component instead of just hanging with nothing loaded in the home component. We can do this in the guard itself. We'll need to bring in the router to use the navigate method. So now before we return folks from the guard, we can navigate back to the start route. So let's try it out in the browser. So we're back on the Start screen. And if we try to go straight to the game component without first starting a game correctly, we'll just get navigated back to the start component again, awesome. So one point to note is that the guard we've built today is a synchronous guard, it doesn't need to do any additional processing or make any Ajax requests or anything else asynchronous. Guards often will need to be asynchronous, especially the CanActivate guard. Like when it is used to check, for example, that a user is logged in or something like that. In this scenario, instead of returning a boolean, the guard can return an observable instead. Routes can then subscribe to the observable to be notified when the guard does finally signal that the route can be activated or not. We still specified this type of guard in our route definition in the same way. We don't have to do anything special. So creating an asynchronous guard is almost just as easy as creating a regular synchronous one, like we have today. So, in this lesson, we saw how we can implement guards on routes, so that routes can only be accessed in certain situations. We saw that a route guard is really just a simple service which implements one of the guard interfaces. We saw that we should return true if the route may be accessed, or false if it should not. And we saw how to redirect the user to another part of the application in the case that the route cannot be activated. And we learned that we can also use asynchronous guards, we just need to return an observable instead of a boolean. Thanks for watching.

Back to the top