Vue.js Todo App - Authentication - Part 10

what's up guys welcome back and in this video I'd like to continue our authentication implementation we started in the last video we have laravel passport generating tokens for us on the backend and now we have to store them on the front end in order to make authenticated requests we'll also take a look at using navigation guards to prevent our users from visiting routes only meant for authenticated users okay so I went ahead and styled the login and register forms nothing pretty just enough so we can make use of it and there's no logic in here it's purely just HTML and CSS okay so let's get started on logging in a user so here I am in my login component let's make sure we can grab the username and the password so we'll put a v-model so I use rename and one for the password and then down here in our script I am going to name it and it's our data fields here and username is empty string and same with password now let's make a new section for methods here let's make a new one called a login and up here to the form Stu submit the prevent equals login came back to our method so here we can make an AJAX request to our login endpoint now if you're not using UX you can call axials from within here but since I am using view X I'm gonna dispatch a new action and I'm gonna call it retrieve you can call it login button and call it retrieve token and I'm gonna pass in a username there's the username and the password ok so into our view X store let's make a new action called retrieve tokens so right here retrieve token token yep context and we're gonna take in the credentials and here is where we'll make an AJAX request so I'm just going to copy one of the other Ajax requests so this one and I'm gonna paste it in here now I'm going to post to the login endpoint we're gonna get the username is credentials username and password is credentials password and this just console.log the response see if we're getting anything see if we're getting token okay so into our app then dev tools let me make this a bit bigger okay so let's see what's going on here I think I have a user called John at example.com and let's give it an incorrect password see what happens okay that's correct 401 unauthorized but if we give it the right password which is secret let's see if we get a response and we do look cool let's see if the tokens in here so it should be should be in theta and there it is right there access token so let's go ahead and make a new piece of data in here called token and we'll make it null initially and it's set it here so let's do cons token is response dot theta that was called access token and now here I don't need this whoops don't need that here is where we're gonna store our token now there's a lot of debate on where and how to store the token we have pretty much two options we can store it in either local storage or as a cookie so I'll leave some links down below on discussions on the best place to store it the most common way is to put it in local storage but just be aware that if you store it in local storage if your site is susceptible to cross-site scripting then your token can easily be stolen by a malicious user now on the other hand if you're using cookies you're protected against cross-site scripting attacks but you're vulnerable to CSRF attacks but yes like I said I'm going to use local storage so local storage is pretty simple to use there's a an object called local storage and to set an item you just call the set item method and you give it a name I'm going to call it access token and then we pass in what we wanna say and now I also want to update our variable here so I'm gonna do context commit and I'm gonna call a retrieved to which we talked and sorry mutation and we're passing the token so let's make one retrieve token what taken the token actually not state and the token and we'll just set the token in our state okay so now if we log in to John at example.com secret and that worked if we checked our view dev tools go to view X and there's our token being stored awesome however if we refresh the page we're gonna lose this so if i refresh you'll see that the token is now no so we have to make sure when we initialize that token so up here are also grabbing it from the local storage so we can use me like this local storage get item access token and we can just do or no now if it exists and it does those are token right there okay next I would like to redirect to this route after we login successfully so it's logging again we also have to define some state for when we're actually logged in like if the token exists that means we're logged in but we'll do that later let's work on redirecting first so secret as you can see nothing happens here in the UI so it worked but I wanted to redirect to here so how do we do that spider code we can do it in here where we will have a successful response but to me and makes more sense to put it in the login component because the login component is responsible for that piece of logic so here is where we're calling it but this is an asynchronous operation so how do we let the parent know that it's done so we can actually call dot then the same way we call it as a promise using Axios and then we can redirect to the appropriate route so this router push we can give it the route name or the route path like this so a B to do well like I said in the router video I like to use names so route names so it's name to do so save that but this is not gonna work yet we have to go back here and wrap this whole thing in a promise so let me show you what I mean we have to wrap this in a new promise that either resolves or rejects based on if it's successful or if it's an errors or resolve reject and let me just that and down here enemy that start sorry that should be like that so to let the parent know if it's either resolved or rejected we just have to call resolve and passing whatever we want us in and down here we can call reject and passing whatever we need to so now this should work and now it should redirect to this route upon a successful login let's try again joined at example.com password and that didn't work Oh wrong password sorry it's secret there you go it redirected cool okay now let's make a getter or a computer property that holds the state of whether or not we're logged in and the only criteria for checking is if the token is null or not so let me show you what I mean back to our store make a new getter which is like a computed property and it's named it logged in takes on a state and all it does is return state that token is not equal no okay so now that we have that let's make it so that these two menu items change based on if we're logged in or not so if we're logged in you wanted to show log out therefore not logged in we want to show login and register okay so back to our code we go to our master view which is where the menu is let's make a new computer property which just refers to that one we just made in the view ex door so let's call it logged in as well and all the times is returned this store debtors logged in okay and now we can check these two so we want to show login and register if we're not logged in so if not logged in same with this one but if we are logged in we want a log out so changes to log out and let's make a component for a logout see if this works it's not gonna work because we don't have this okay it does but let's make a component for logout we can do it in here but since we already have a component for login and register let's go ahead and make one for Lago make a new one with Olga up you okay the template is gonna be empty and the script is going to contain the logic for logging out let's work on that in a second let's go to our routes file first and it's add log out here log out and log out and it's at that here I don't work about logout hey so that's good and there's no errors cool okay now let's work on actually logging out so what needs to happen when we log out we have to destroy this token on both here in the browser and also on the server so if you remember in the last video we worked on an endpoint for deleting the tokens on the server so let's go ahead and make everything work here so back to our logout component I'm gonna call another action this store dispatch let's call it oops destroy token sorry there should be in a created lifecycle okay so this will be called whenever we click on it here again we can put it here in the master and just call a like a click handler here but this works as well and it's nicely separated into its own component so let's call destroy token let's go ahead and make that so into our actions just call a new one just make a new one called destroy token context and we only want to do it when we're logged in so we can refer to that logged in getter that we made so logged in and we want to do something similar here where we return a new promise so the parent can call dot then and respond accordingly after a successful Ajax request so let's paste that in and we're gonna post to logout and there's no data and when you get rid of this we're gonna remove item access token we don't need this context commit destroy token we don't need this and for the error case we also want to do the same thing this just handles the case if someone tried to enter their own local storage key so it just removes it if it's invalid and now similar to when we login just grab this and here and I'll go just paste that in and it's pushed to home alright see if that works so no errors we're logged in let's see if this removes it actually I didn't do the mutation yet as to the mutation so back to our store I have to make a destroy token yeah destroy token state and it's just set it to know okay see if this works okay so we are logged in and there's our token and it's logout actually before I do that let's take a look at the database and you can see there are a few entries for three let's see if it deletes them all after we logout and if it deletes this also before I do that one more thing if you want to check your local storage just go to application and go to local storage and you can see it right there access token so let's go back into view dev tools and see if it works okay so you can see it's no you can see it's gone from here and see if it's gone from the database okay that didn't work see what happened here okay so it's an authenticated because we did not pass through the header of the token so we'll worry about that later for now the token is destroyed on the client-side but not the server-side and that's okay for now you can see that this works too so once we're not logged in we get these two menu items over here actually you know what let's just make that work and it's passed through the header as you can see it didn't redirect accordingly after we logged out that's because it didn't do it successfully so let's go ahead and make everything work so over here we have to pass in the correct header so we have to tell Axios what header we want and to do that we just do this so just pass in the authorization header and the value is bearer with a space and then we're just passing in our token so now let's see if that works so we have to log in again John at example.com secret okay and there's our token and now if you log out tokens gone but let's see if this is gone now so to see if all the threes are gone and they are cool okay now let's work on navigation guards so navigation guards work similarly to middleware in laravel so what we want to do is we want to prevent the user from going to this route if we're not logged in and conversely when we're logged in we don't want them to be able to go to log in or register let's go back to our cards I mean our routes and for any route we want to protect let's add a new meta feel to it so like I said we want to protect these ones so login is one so we can put a new meta tag on it and let's call it requires that your visitors little cars visitor and set it to true and I'm going to do the same for register and for this one we'll do the same thing but we'll rename it to requires off now if we go over to our main J's file this is where you would specify the navigation cards so if you got a documentation if you go to route meta fields this is how you would do that so if the route requires off you just checked if you're not logged in and then you redirect accordingly so let's grab this and back to our code right here we can use this so instead of this we have to use our store here so store getters stuff logged in and it's not a method so if we're not logged in and we click on app where do we want it to redirect to we want to redirect to login so we can use path but like I said I like using names so I just changed it to name take out the slash we don't need this query and and now that should work let's give it a try so how about login ok if we try to access this then it redirects to login now for the other case right here we can just do an else--if for the other case so actually just grab this and paste it in here but this should be in elsif and this should take care of the other case so let's requires visitor and now if we are logged in let's redirect to the to do route ok and see if that works so let's login again okay now we can't grab it from the menu but we can just type it in here and this should just redirect back to this page and it does cool and it's try register cool I'm not sure why it's refreshing okay I guess that's the way it works yeah okay okay now let's quickly work on registering users and then we'll call it a day so register is here and it's pretty much the same as logging in so let's just go to our register component lets make models for these so name and then what's this one email and then password let's make a submit hander prevent sorry register close that and just make a data name email password and then methods register let's do the same thing as we're doing in login suppose this grab this based on in except for registering and name is this name email and then password and after its successful we want to redirect to the login page okay now into our store let's make a new one called register context and we're passing in some data here and similar to everything else let's just grab this Li and we're posting to register and we don't need any of this actually we do need the resolve and we need to pass in some data name is theta dot name email is data the email and password stated that password and it's get rid of this too and see if that works okay no errors good make a new one and set the password the password submit and that look like it worked there's no success message maybe I will add that in a later video but let's check our database for users and there I am right there and it's actually try logging in and there we go we're successfully logged in cool okay so you probably noticed that these two dues are not yet set up for specific users we'll take a look at this in the next video where we modify our level API to accommodate for that please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one kay thanks bye [Music]

Channel: Andre Madarang

Views: 139,386

Rating: 4.9443517 out of 5

Keywords: vue, vue.js, vue.js tutorial, vue app, vue js, learn to build a vue.js app, learn vue.js, vue todo app, vue todo app tutorial, vue.js tutorial video, vue js basics, vue app example, vue js introduction, vue.js intro, vue basics, andre madarang, drehimself, vue authentication, vue auth, vue jwt authentication, vue laravel passport, laravel passport vue authentication, vue local storage, vue cookies, vue navigation guards, vue login, vue login authentication

Id: GRhkhSzyApc

Length: 31min 4sec (1864 seconds)

Published: Fri May 11 2018