Sometimes you might want to attach arbitrary information to routes, like maybe the name of a transition you'd like applied just to that route, or some indicator of who has access to that route. Such information can be stored through the route meta property. The meta property is simply an object with key value pairs that can be absolutely anything you want. A common use case for route metafields is defining protected routes or routes that are only accessible via a logged in user.
Let's make such a route for our travel app. Be aware, this lesson is not meant to help you produce real authentication. Normally, we would have to check if the user and password match those that are in a database and only then allow the user to sign in. but we're just going to fake that part in order to learn more about Vue Router.
First, let's define the route. We'll give it a path, a name, and a component, just like all the other routes. For the component, we'll lazy load a protected page that we'll create in just a minute. Now, let's use the meta property to tell ViewRouter that this route requires off.
We could name this property whatever we'd like. We could call it protected, logged in, requires auth, skinny jeans, literally anything. I'll go with requires auth as it seems the most descriptive to me. Now let's create the protected page.
It won't be anything fancy, just a page with an H one saying protected. We can access our protected page now, but so can the rest of the world. How do we actually make that requires auth route meta actually mean anything? Well, this is where navigation guards come into play.
Let's scroll down to the bottom of our router file. Just before we export router, we can define a beforeEach method on the router. This is called a global navigation guard. That means every single time a route changes in the application, this function is fired.
In this function, we can access the meta on the route we're navigating to and check to see if the requiresAuth property is defined. If it is, we'll force the user to log in if they aren't already. In order to log in, we will need to create a login page that contains a form with an input and label for our user name and password and a submit button. Let's make that real quick.
We can use the vModel directive with the value of username and password so that we can bind these values to some data. Then, in our data property, we can set the values of username and password to an empty string. We can then add a submit event to our form, which we'll call the login method when the form is submitted. We will also use the prevent modifier to prevent the browser's default action for form submission since we are handling the submit with a login method.
In this lesson, we will not perform the actual authentication. In a real-world application, this is where we would authenticate the user against our API. For now, we'll just pretend that the user is successfully authenticated and store the username on the window. push.
that in our router file, we need to add the route for the login page. Then, we can check if the user is authenticated or not in the route guard. So, if we don't have the user on the window, we have to redirect them to the login page. We can do that by returning an object with the name property set to login.
Each route object in the routes configuration is called a route record. Route records may be nested, so if a route is matched, it can potentially match more than one route record. For example, if we were to add a metafield to the experiences route, it would also match the destination route, as experiences is a child of destinations. In Vue Router four, we can simply reference the meta property as it's a non-recursive merge of all meta fields from parent to child.
This means what we've got will work and scale just fine. This was a little more complicated with previous versions of Vue Router, but now it couldn't be easier. We can now add the route to our navigation component by adding a router link that goes to the protected route. Now, let's try to access our protected page without logging in.
You will see that we are redirected back to the login. Great! If we click Submit without adding a username, we will not go to the protected page. However, if we do add a username, we go straight to the protected page and are logged in.
Remember, we didn't add any logic for the password, so it really doesn't matter if we fill that in or not. Let's personalize the message a bit on the protected page so that it feels more like we're accessing real personal information. Cool, now let's add a way for the user to log out again. In our protected page, we can create a logout button.
And we can add a click event with a logout method. Then in our methods, will create a logout function that resets the value of the user to null. Basically, reset the value. push to redirect the user to the home page.
And, as you can see, it works just like it should. We can now log out and log in again.