In this lecture, we are going to apply a routine guard to some of our roots.
We've talked about protecting our roots from non authenticated users.
Users shouldn't be able to access specific routes based on their authentication status.
For example, the manage and upload pages should be inaccessible to non authenticated users.
To tackle this issue, we redirected the user after logging out.
However, our solution is not entirely foolproof.
I'm logged out of the application at the moment.
It's not possible to navigate to either page because both links are hidden from the user.
That doesn't mean they're completely inaccessible.
I can manually navigate to either page through the address bar in the browser.
As you can see, the component gets rendered, our route is not completely safe.
Angular is routing library introduces a solution for protecting routes called guards.
A guard is a function that'll run before navigation is performed.
Guards have the final say before the user is navigated to a page.
We can choose to tell the router to reject the request.
We can create a guard, but we don't have to.
The angular fire package exports guards for checking the user's authentication status.
We can use these guards to reject authorization to a specific route.
Let's give them a try in your editor.
Open the video routing module.
At the top of the file, we are going to import a guard called angular fire off guard from the angular
slash fire slash compat slash off guard package.
Next, we are going to add a property called can activate to the manage routes.
The can activate property, can accept an array of guards.
It'll run the guard whenever the route is accessed.
Let's pass in the angular fire off guard class.
Applying a guard is as simple as that.
Let's give our app a test in the browser.
Try navigating to the Manage page while being logged out.
Unlike before, Angular is not rendering the components.
Our request is being rejected.
If we look inside the console panel of the developer tools, an error does not get thrown.
Previously, errors would be thrown if angular couldn't match the path to a.
This time, Angular did find a match, but chose not to render the components.
We're almost there.
I think it would be a good idea to redirect the user to the home page if their request is rejected.
Luckily, we can modify the guards from the angular fire package.
We can use our as pipes to modify the behavior.
In fact, the angular fire team has provided some pipes for some of the most common actions.
Switch back to the ED.
We will update the import statement to the angular slash fire slash compat slash off guard package to
include a pipe called redirect unauthorized to.
This pipe will redirect the user A to a page if they are not authorized to visit or route, rather than
writing the logic ourselves.
We can use this pipe to perform the behavior for us below the import statements.
We will create a variable called redirect unauthorized to harm.
It's now will be a function that returns the redirect unauthorized to pipe.
When we have this pipe to our guard, we must pass in the function that returns the pipe.
This pipe function has one argument, which is the path to redirect the user to let's pass in a forward
slash character to redirect them to the home page.
Next, we can apply this pipe to the guard by adding it as a data property in the data object for the
managed route.
We will add a property called off guard pipe.
Lastly, we will set this property to the redirect unauthorized to home function.
If this data property is present in the route, the guard will run the pipe function, the pipe function
will only run if the guard rejects the request out of the box.
The angular fire package is very helpful.
Before we test our app, let's apply the same guard to the upload route on the upload route object.
We will add the can activate property with the angular fire off guard class.
Inside the data object set the off pipe property to the redirect unauthorized to home function.
Let's test our app in the browser.
Try navigating to the Manage page.
We are redirected to the homepage.
Awesome.
We've successfully guarded our routes against unauthorized users.
This concludes this section on routing.
We've learned a handful of techniques for adding routing capabilities to our app.
We're not completely finished with routing.
There are more features we will explore in the future.
For now, let's move on to uploading files.
When you're ready, I'll see you in the next section.