In this lecture, we are going to add another route as an exercise.
The new route should have some data attached to it in my browser.
I have opened the static template for the upload page.
This page should be accessible to authenticated users only as an exercise.
I want you to create a component for this page.
Update the templates and register a route during the route registration.
Add the same data we added to the Manage page.
We don't have to repeat the same logic for logging out.
The logic we've written should work for any routes.
One more thing the Manage page has a link for uploading files.
This link should point to the new route.
Pause the video and good luck.
Welcome back.
If you are able to create a route for the upload page, congrats.
If not, that's fine as well.
Let's tackle the implementation together.
The first step is to create a component in the command line.
Run the following command energy g component video slash upload.
The component is being created under the video module before we register the route.
Let's update the template openly upload HTML from the templates directory.
Inside this template, search for the comment that says main content.
We're going to copy the entire section tag next, open the upload template file for the component we
generated.
Replace the existing template with the template we copied earlier.
Next, we can register the route inside the video routing module.
Open this file in your editor.
At the top of this file, import, the upload component.
Afterward, add an object to the roots array, the path property will be set to upload.
The component property will be set to the upload component.
Lastly, we want to redirect users if they log out while they're on this page.
We will add the data property.
The data property will be an object associated with the roots inside the object.
We will add the off only property with the value of true.
The name of the property is essential.
It's the name that will be checked by our authentication service.
There's one final step we need to update the links in our components.
We will start the navigation component, open the navigation template file.
You can find the link for the upload page directly under the Manage link on the anchor element.
We will replace the sheriff attribute with the router linked directive.
We will set the URL to slash upload.
Navigation links in the header should be highlighted.
We should attach a class if the link is active, let's grab a copy of the router link active property
from the other links.
You will add it to this link.
We should update be manage component to open the manage template file.
You can find the link inside the first pair of section tags.
It'll have a comment above it that says top bar, the anchor element does not need to be active.
The user won't be able to see this link if they're not on this page.
We can jump to directly adding the link.
Let's replace the RF attribute with the Router Link directive.
The URL will point to slash upload.
Let's give our app a test in the browser.
You shouldn't be logged into the application.
Otherwise, you may not be able to view the links for the upload page.
We should be able to navigate to this page from the navigation menu or manage page.
Either link should work.
We should test if the router redirects the user if they're on the upload page while logging out.
Perfect.
We've got a functioning upload component.
Let's continue working on the other pages of our app in the next lecture.