Coding

SENDING THE JWT WITH VUE.JS | Laravel + Angular 2 / Vue.js 2

  • 00:00:01 welcome back to this series on creating
  • 00:00:04 a lateral back-end and connecting it to
  • 00:00:07 angler or view chest front-end we
  • 00:00:11 already finished back in part we added
  • 00:00:13 authentication to it and we also already
  • 00:00:15 finished the angular front-end part
  • 00:00:18 we're also pretty far regarding the view
  • 00:00:21 chase front-end there we are able to
  • 00:00:24 assign a user up and in and we're
  • 00:00:26 storing the token we're getting back
  • 00:00:27 from the server now we want to send this
  • 00:00:30 token with requests which acts protected
  • 00:00:33 resources on our server to be able to
  • 00:00:36 access them again if we are
  • 00:00:37 authenticated now since we already store
  • 00:00:40 the token with this line of code here
  • 00:00:43 and we are able to sign in here with our
  • 00:00:46 sign-in form we got everything we need
  • 00:00:49 you authenticate ourselves to the server
  • 00:00:51 and let them know that we are indeed
  • 00:00:53 allowed to access protected resources so
  • 00:00:56 the missing piece for us is to send this
  • 00:00:58 token with requests that access
  • 00:01:01 protected resources now if we have a
  • 00:01:04 look at our back-end here in our routes
  • 00:01:07 file and the API PHP folder we see which
  • 00:01:11 routes are protected throughout which
  • 00:01:13 creates a new quote which updates a
  • 00:01:16 quote or deletes a quote getting quotes
  • 00:01:19 is not protected so therefore for these
  • 00:01:23 free routes here we need to send this
  • 00:01:26 token from our front-end now we do
  • 00:01:29 access these routes either from our
  • 00:01:31 quote component here where we have to
  • 00:01:34 delete and update methods or from the
  • 00:01:36 new quote method now I will quickly ask
  • 00:01:40 the code we need to use here in these
  • 00:01:44 components and I will start in a new
  • 00:01:46 quote dot view file now the simple thing
  • 00:01:50 we need to do is here and unsubmitted
  • 00:01:52 where we try to create a new quote we
  • 00:01:54 need to get our token and we can get it
  • 00:01:57 from all local storage because that's
  • 00:01:59 where we stored it we use the key token
  • 00:02:01 so by getting an item with that key we
  • 00:02:04 should get a token where we get
  • 00:02:06 undefined if no token is stored now this
  • 00:02:09 is fine if we get undefined because we
  • 00:02:11 will check if a token is present on our
  • 00:02:13 back-end so only if
  • 00:02:15 touken is present and only if that token
  • 00:02:18 is valid only in this case are we
  • 00:02:20 allowed to continue so here where we
  • 00:02:24 sent this post request we now need to
  • 00:02:26 add this token and we do this by simply
  • 00:02:30 adding a query parameter to it so at the
  • 00:02:33 end of this route I'll add a query
  • 00:02:35 parameter which is called token and the
  • 00:02:38 value is of course
  • 00:02:39 well our token we fetch here and this is
  • 00:02:42 all this well send token and allow us to
  • 00:02:44 create a new quote now since this is all
  • 00:02:48 it takes
  • 00:02:48 let's see if it works if I go back to my
  • 00:02:52 application here and I sign in with my
  • 00:02:57 assigning credentials this seems to work
  • 00:02:59 now let me go to the new quote page and
  • 00:03:02 let's create a new quote here and hit
  • 00:03:05 submit and this looks pretty pretty good
  • 00:03:08 we get to created status text here and
  • 00:03:11 if I get my quotes we see the new quote
  • 00:03:13 now if I try to delete that it is
  • 00:03:16 deleted here of course because we update
  • 00:03:18 our front-end before waiting on a
  • 00:03:20 response on the back end to give this
  • 00:03:21 instant reaction to the user but you
  • 00:03:24 will see that we got an error message
  • 00:03:26 and if we have a look at this error
  • 00:03:28 message here in the network tab you see
  • 00:03:31 that in the end it just says token not
  • 00:03:33 provided now of course we could also
  • 00:03:36 print this more cleanly and prettily in
  • 00:03:38 our front end here when we catch it
  • 00:03:40 there is something you could try
  • 00:03:42 implementing as a bonus task I want to
  • 00:03:45 come back to how to add the token to not
  • 00:03:48 get this error message so since we
  • 00:03:50 already implemented this logic here in
  • 00:03:52 our update quote excuse me in our new
  • 00:03:55 quote component I will go to the quote
  • 00:03:58 component where we have to delete and
  • 00:03:59 update methods and you could also create
  • 00:04:02 a mix in to share this code across all
  • 00:04:05 components where you need to have this
  • 00:04:07 token retrieval code or create a shared
  • 00:04:10 method in this component here I will be
  • 00:04:12 very explicit and add this token
  • 00:04:15 retrieval code to both methods on delete
  • 00:04:18 and on update and then we need to add
  • 00:04:20 this query parameter very importantly
  • 00:04:23 after this ID though so not here after
  • 00:04:27 quote not here it
  • 00:04:29 be at the end of your URL so here I will
  • 00:04:32 add a new string question mark token
  • 00:04:34 equals and then well equals our token
  • 00:04:38 and I will copy this and paste it into
  • 00:04:41 this purge request as well at the very
  • 00:04:44 end
  • 00:04:44 now with this token should be sent to
  • 00:04:47 all requests where we need to send it
  • 00:04:49 and keep in mind if you don't have the
  • 00:04:51 token will be undefined hence you will
  • 00:04:53 get an error and not be able to access
  • 00:04:55 this and now with that if I reload my
  • 00:05:00 application and get my quotes you see
  • 00:05:02 it's still there let's try to edit it
  • 00:05:04 simply like this hit save and this looks
  • 00:05:08 good
  • 00:05:08 we're getting status 200 and if I reload
  • 00:05:11 the app and reload my quotes you see
  • 00:05:13 that indeed quote or that change was
  • 00:05:16 stored in the database and now if I
  • 00:05:19 delete it this looks good too we're
  • 00:05:21 getting a success message and if I try
  • 00:05:23 to get my quotes again it's not coming
  • 00:05:26 back because indeed it was deleted so
  • 00:05:29 sending the token from our view jeaious
  • 00:05:31 application works too and with that we
  • 00:05:35 implemented all I wanted to implement in
  • 00:05:37 this tiny serious we have a lateral
  • 00:05:40 back-end serving as a restful server
  • 00:05:43 where we have a couple of routes here
  • 00:05:46 which target appropriate controller
  • 00:05:48 actions when we validate our input and
  • 00:05:50 that store quotes or create a user or
  • 00:05:52 assign a user in and sent back to stokin
  • 00:05:55 we get route protection place to prevent
  • 00:05:59 access to some well sensible routes from
  • 00:06:02 unauthenticated users and on the front
  • 00:06:05 and we finish both our angular and our
  • 00:06:08 view KS application of course these are
  • 00:06:11 very basic applications and you can
  • 00:06:13 approve them both when it comes to the
  • 00:06:15 look of it and the features they offer
  • 00:06:17 but what did you offer are a lot of key
  • 00:06:20 features you will probably need in your
  • 00:06:22 projects accessing your restful api
  • 00:06:26 sending requests or post requests you
  • 00:06:29 create new quotes or put or delete
  • 00:06:31 requests or a get request and also
  • 00:06:34 authentication how to implement this how
  • 00:06:36 to manage to token and then finally how
  • 00:06:39 to allow users to sign up and sign in to
  • 00:06:41 be
  • 00:06:42 able to access your protected resources
  • 00:06:44 so a lot of things covered I hope you'll
  • 00:06:47 join me in future serious to see you
  • 00:06:49 there bye