Coding

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

  • 00:00:01 welcome back and well now we already
  • 00:00:04 achieved a lot in this series we are
  • 00:00:06 fennec aided users we edited the back
  • 00:00:08 and to allow us to authenticate users in
  • 00:00:10 the first place and in the last video we
  • 00:00:13 were able to sign the user in and
  • 00:00:14 receive two token which of indicates to
  • 00:00:17 user which allows us to authenticate for
  • 00:00:19 subsequent requests now we're at this
  • 00:00:21 subsequent request part now when I use
  • 00:00:24 this token to well allow us to create
  • 00:00:27 quotes again because right now we get
  • 00:00:29 this error message so let's change
  • 00:00:31 something about this and let's make sure
  • 00:00:33 that we can indeed now create quotes
  • 00:00:36 again to do this we already stored token
  • 00:00:40 in the local storage now we need to
  • 00:00:42 retrieve it when we send requests to the
  • 00:00:44 server so in my quote service here we
  • 00:00:49 need to attach this token for adding
  • 00:00:51 quotes updating quotes or deleting
  • 00:00:54 quotes and to do so we need to reach
  • 00:00:56 Reeve to token so I'll add a little help
  • 00:00:59 a method to my whoops to my off service
  • 00:01:02 here I'll name it get token and you
  • 00:01:05 could add this anywhere but I think
  • 00:01:07 logically it makes sense to sell in the
  • 00:01:09 off service and all I will do here is I
  • 00:01:11 will return local storage get item
  • 00:01:15 tokens although try to fetch this token
  • 00:01:18 from the local storage of course this is
  • 00:01:20 undefined if we don't have two token
  • 00:01:22 store it there so with this in place I
  • 00:01:25 can go to the quote service and inject
  • 00:01:27 my off service here to get access to
  • 00:01:29 this newly created method so the off
  • 00:01:31 service is added here but that we're now
  • 00:01:33 able to get D token from the off service
  • 00:01:36 make sure to add this import here at the
  • 00:01:39 top though in the quote service that is
  • 00:01:41 now and now for adding a quote I need to
  • 00:01:45 get to token so I can reach out to off
  • 00:01:47 service and simply call get token there
  • 00:01:51 and this is even the token or null if we
  • 00:01:54 don't have a token whatever it is if it
  • 00:01:56 is null well we will get an error
  • 00:01:58 anyways when trying to reach out to the
  • 00:02:00 back end so in this case here when we
  • 00:02:04 get the token we now need to add adhere
  • 00:02:07 to our request so I will add a query
  • 00:02:13 parameter token equal
  • 00:02:14 and then well equals our token which you
  • 00:02:17 just fetched from the local storage some
  • 00:02:19 of that we're trying to attach the token
  • 00:02:21 to our request and this is how you saw a
  • 00:02:24 few lectures earlier how we do it we add
  • 00:02:27 it as a query parameter at the end of
  • 00:02:29 our URL well with that we now send the
  • 00:02:34 token to the back end we we now are able
  • 00:02:38 to hopefully create posts again or
  • 00:02:41 quotes again let's see it in action I
  • 00:02:44 already have a quote token stored in a
  • 00:02:48 local storage from the last video let's
  • 00:02:51 now go to add a new quote and new quote
  • 00:02:54 again and let's hit submit and an open
  • 00:02:59 on a new window but I got this quote
  • 00:03:00 created alert so this seems to work
  • 00:03:03 let's have a look at the database figure
  • 00:03:05 two quotes here it is a new quote again
  • 00:03:08 so indeed we were able to create this
  • 00:03:11 quote with the token we passed so this
  • 00:03:14 works as it should now let's quickly add
  • 00:03:17 it for all the other methods here too
  • 00:03:19 so for updating a quote here we should
  • 00:03:24 also at the end after the ID here we
  • 00:03:27 should also then add to token query
  • 00:03:29 parameter and pass the token so make
  • 00:03:32 sure to do this after the idea after /id
  • 00:03:35 add question mark token equals and then
  • 00:03:37 your token and do the same for deleting
  • 00:03:40 also here after the ID because it should
  • 00:03:43 be the last thing you have in a string
  • 00:03:46 token equals and then your token and
  • 00:03:49 this should allow you to delete an
  • 00:03:50 update post too now of course we also
  • 00:03:54 should implement some error handling for
  • 00:03:57 example if we get an error that the
  • 00:03:59 token did expire and you remember
  • 00:04:02 probably that we do send or that the JWT
  • 00:04:05 middleware does send such messages if
  • 00:04:09 that is actually the case so that is
  • 00:04:11 something you should do in a real app
  • 00:04:12 implement some error handling here
  • 00:04:15 handle the case that you're not getting
  • 00:04:17 a successful response but instead that
  • 00:04:19 you're getting an error and show an
  • 00:04:22 appropriate message to user like you
  • 00:04:24 need to sign in again I won't do it here
  • 00:04:26 for now maybe add later
  • 00:04:28 see but it's something to keep in mind
  • 00:04:30 right now we will only see an error in
  • 00:04:33 the console and of course the user
  • 00:04:35 typically doesn't look at the console
  • 00:04:37 and shouldn't
  • 00:04:38 so definitely implement your own error
  • 00:04:41 handling but I want to check if it works
  • 00:04:43 for updating and deleting quoting quotes
  • 00:04:45 if the token is sent there so let's go
  • 00:04:48 to quotes and get all the quotes whoops
  • 00:04:51 get quotes and yeah let's add it just
  • 00:04:54 quote here a new quote 20 20 to 80 or 2
  • 00:04:58 – 2 – I mean but save looks good no
  • 00:05:01 error message if I reload here get
  • 00:05:04 quotes again that looks good and if I
  • 00:05:06 now delete it dad seems to work to quote
  • 00:05:10 delete at let's again reload and see if
  • 00:05:13 there really gone looks great
  • 00:05:15 with that we changed our angle to front
  • 00:05:18 and to now also allow us to sign users
  • 00:05:21 up sign users in stored a token and use
  • 00:05:24 that token to then do something on the
  • 00:05:27 server and authenticate ourselves and
  • 00:05:29 you also saw that we are protected
  • 00:05:31 against invalid tokens or no tokens
  • 00:05:34 being present and this is how you
  • 00:05:35 typically authenticate with a single
  • 00:05:38 page application and the API in the
  • 00:05:40 background now next I will move on to do
  • 00:05:43 the same for view chairs of course feel
  • 00:05:46 free to improve this app to add better
  • 00:05:47 error handling improve the styling a
  • 00:05:50 little bit to make it look nicer or
  • 00:05:51 whatever you wanna do but these are the
  • 00:05:54 basics which should get you started I'll
  • 00:05:56 see you in the next videos bye