2.2 Maintaining State With Vuex
Our application needs some way to determine if the user is authenticated. We'll use Vuex to handle that for us.
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.2 Maintaining State With Vuex
The next thing we need to do is determine whether or not the user is authenticated. And we can approach this in a couple of different ways. One way might be to issue a bunch of requests simply to just check if the user is authenticated. And while that would work, I think that's a bit too much, primarily because we are already going to be sending a lot of requests. If we want to fetch the feeds or update the feeds or anything like that, just about anything we do is going to involve a request. So we're already going to have to determine whether or not the user is authenticated in that way. So the client really is nothing more than a dummy terminal. It is simply responding to the data that it gets from the server. So issuing even more requests, that's too much. So instead, what we're going to do is store an authentication token in local storage. So that whenever we log in the server is going to give us that authentication token. And, all the client has to do is check to see if we have that token. Now, let me also say this, this is not going to 100% secure our application. The server is the ultimate source of truth. So every request that we are going to send to the server is going to have this authentication token and it is up to the server, to determine whether or not that token is authentic. So as I mentioned, the client is just a dummy terminal it is responding to the data that it gets from the server. So ultimately we determine on the server if the user is authenticated. Now as far as our client is concerned, we just need to check local storage. And in some applications, we might build a little service object that would give us easy access to that information. I think for right now, our view x store is going to be perfect for this case. If it turns out that we need to extract that functionality into its own little service, so that we can use it in other places, then yes, we can do that. That's also kind of what our vuex store is to begin with anyway. So let's add the getters section here. And we're going to have a getter simply called IsAuthenticated, and it is gonna get an item from our local storage. So let's just call that token. And the key that we are gonna use is going to be auth-token. Now of course, if we have a token, we can assume that we are logged in otherwise, we will assume the user is not authenticated. So we will simply just compare token with the value of null, because if we don't have a token, then our token variable is going to be null. So if our token is not null then we are authenticated. If it is equal to null then we of course, are not authenticated. And now, we can use this getter throughout any component that we might want to use it in. Like for example, let's go to our app view. Now right here, this ul element is where we would have our menu and we can actually approach this in a couple of different ways as well. We could have two completely separate menus, one for authenticated users and one for users that is not authenticated and I tend to like that particular approach. So we are simply going to add a v-if to this ul element, and we are going to check whether or not the user is authenticated and we're going to do so using our view x store. We're going to access one of the getters which is IsAuthenticated. So if we are not authenticated, then we will have an li element with a class of nav-link. And we're going to have the router link component used right here. We want to go to the login we'll have log in first and then have the register link and this needs a class of nav-llink. The text will simply be login and we of course want to close out that element. So we essentially want to do the same thing for register. Let's just copy and paste we'll change the path to register, the text to register. And so then inside of the browser we should see those two links. Now let's just change our condition here. Let's say that if we are authenticated then we will see those two items we don't. So we know that that is working correctly. And of course, this means that we can go to either the register or the login views. Let's go ahead and add links down here in the text for login and register. So let's open up those two views. And let's add that router link. Since this is for login, we are simply going to say that this is to login and then of course Inside of the login view, it's going to be reversed. So let's just copy that, so we can paste that in. We will change the path to register and, of course, we will close out that router link. So with those two changes done, let's go ahead and save those views. Whenever we go back to the browser, we can register now or we can log in now. So everything is working okay there. So now that we have that functionality ready to go, we need to write the functionality for actually registering a user. And we will start doing that in the next lesson.