2.7 Guarding Vue Routes
Our server is the ultimate decider of whether or not a user can access certain resources. However, that doesn't mean we can ignore access control in the client. In this lesson, we'll prevent unauthenticated users from accessing certain views in our client application.
1.Introduction2 lessons, 06:25
2.User Registration and Authentication7 lessons, 1:05:20
3.Wireframing the UI3 lessons, 27:30
4.Handling Requests5 lessons, 39:24
5.Conclusion1 lesson, 01:04
2.7 Guarding Vue Routes
In this lesson, we're going to finish up with our authentication so that we can control what views the user has access to, because only authenticated users should have access to this feeds view. And we will also have another view for the settings. And we of course want to control that. Now right now we are currently logged in so it's okay that we have the feeds pulled up. But notice our menu here We are logged in, but we still see the menu. And the reason is very simple. We have that getter that we are using that gets the token from our local storage. And that's not really the best implementation. And this is just part of software development. We have these ideas, we implement them. They don't work. So we are going to modify this. Now, if we refresh the page, then that's going to go away. But this isn't very reactive. And we want something that is reactive so that the whole application changes on a dime, just like that. So we're going to change this so that we're going to have a token inside of the state and we're going to initialize that by looking into local storage. And getting the auth-token. Now, if we have one, great, then token has a value. Otherwise, it's going to be null, but that's fine. We're also going to change our is authenticated getter to just simply be token, and we will return state.token. So, there we go, that should also be reactive as well. So that's not it though because we set the auth token in the local storage instead of our HTTP module. And that's okay but we also need to be able to update this value. Inside of our state as well, and I would like to just do both of those things at the same time. So we are going to modify our HTTP module so that we are no longer doing this where we are checking to see if we have a token. Then setting the auth token. So we're just going to take that out. And instead we are going to do that inside of our actions. So that after we send the requests to register or login, then we will check to see if we have that token and if so then we will save that in local storage, but we also want to update Are token here. So we need a mutation. And we're just going to call this set token, where we have our states we also have the value that we need. And this is where we will set our local storage. So we will simply first of all set our state's token to the value Then we will set local storage and set item off token. Now that does mean that we will need to change the actions so that we commit these mutations as opposed to directly writing to local storage, but that's not that big deal. Because all we have to do is this we'll use our context, we will commit the set token mutation, and we will pass in the token that we get from the server. So let's copy that. Let's paste that line And that should be it. Now we do need to go to our app view and we need to change this, we could still use the getter here. So let's change this to token. And since we made all of these changes, let's do this. Let's test first of all to make sure that everything is working. So we're going to clear out the token. We are going to go to The login and we are going to login. So if this works, then we will be ready to continue on. So once we log in, our menu goes away, there we go we have a great way now of determining whether or not we are authenticated. So now we need to protect this feeds view and to do that, first of all, We're going to clear out that token once again. So let's pull up the developer tools we might leave that up because we might need to delete that a couple of times and we are going to go to the router. Now there are a lot of ways that we can protect our views. We can use guards right here directly inside of our router. We can Protect it directly inside of the views themselves. But I like the approach of using guards because it allows us to reuse guards if it makes sense to do so. So first we We are going to pull in our store, because this is how we determine whether or not the user is authenticated. And then we are going to go to the feeds route here, we're going to add another item called before, enter. Now this is going to be a guard specifically for this route. But what we can do is break this out into its own function and we can use this in whatever. Route that we need to. Now there are three things that are passed to this before inter function. The first is where we're going to, the second is where we are coming from, and then the The next is the next thing that we do. So in our case if we are not authenticated, then next is going to be actually going to the login field and you will see that. All right here. So we will first of all check our store. And we will just use our getters and the token. So if we have the token, then what we want to do is just go on to whatever is next. Otherwise, if we don't, we still want to call this next function, but we want to specify where, We want to go. And that is simply going to be the login route. So it's very simple, very straightforward. If we go to the browser, it's automatically taken us to the login if we try to go to feeds It redirects us back to login. So we are now protecting our feeds route and we will do the same thing when we have our settings or our options. But let's go ahead let's log in and we will be able to access the feeds route. And of course our menu goes away as well. So in the next lesson we will actually start implementing our feeds view. We're going to have three panels, one for the feeds, one for the items of that feed and then one for the content of whatever item we select.