Coding

LARAVEL JWT MIDDLEWARE | Laravel + Angular 2 / Vue.js 2

  • 00:00:01 welcome back in the last video we
  • 00:00:03 implemented this check if we can get the
  • 00:00:06 user from the token and only if we are
  • 00:00:09 able to extract the user and we can't we
  • 00:00:11 could use the user object thereafter to
  • 00:00:13 maybe assign it to a quote and so on
  • 00:00:15 only we were able to extract user does
  • 00:00:17 this code proceed so only in this case
  • 00:00:19 are we able Q well X is our quote here
  • 00:00:23 or create a new quote in this case now
  • 00:00:25 also want to protect the other action
  • 00:00:27 and as I mentioned at the end of the
  • 00:00:28 last video we could simply copy the code
  • 00:00:30 into every other action and that would
  • 00:00:32 work but that is not really the best way
  • 00:00:34 to do it because it repeats our code all
  • 00:00:36 over the place if we change something we
  • 00:00:38 have to change it everywhere at last not
  • 00:00:40 in the best way we can use a middleware
  • 00:00:43 for this and the JWT off package which
  • 00:00:46 we are using already ships with some
  • 00:00:48 middleware to use so all we have to do
  • 00:00:50 is register this middleware and we
  • 00:00:52 register middleware in the kernel of a
  • 00:00:54 PHP file this is where our level
  • 00:00:56 application gasps kind of configure to
  • 00:00:59 where the requests get me a configured
  • 00:01:01 you could say where we can in general
  • 00:01:03 set up middleware you we want to apply
  • 00:01:05 to our requests and we can set up some
  • 00:01:07 specific middleware which gets applied
  • 00:01:09 to every request we can define some
  • 00:01:12 groups which you can assign or we can
  • 00:01:14 assign or create some off middleware
  • 00:01:16 choosing some route middleware like the
  • 00:01:18 off mode where it is all built in
  • 00:01:20 middleware lateral ships with and you
  • 00:01:22 might know this middleware now didn't
  • 00:01:25 Laurel ultimately we're here won't do
  • 00:01:27 the trick for us because we're using
  • 00:01:29 your normal off system we're using the
  • 00:01:31 JWT token thankfully de package we're
  • 00:01:34 using ships with its own middleware all
  • 00:01:35 we have to do is assign it here in the
  • 00:01:38 route middleware array so that we can
  • 00:01:40 then assign it in the routes file now it
  • 00:01:44 doesn't matter where you add here I'll
  • 00:01:45 add it at the end simply to well have
  • 00:01:48 the separation between built-in and new
  • 00:01:50 malware and you can give it any name you
  • 00:01:54 want you're totally free to choose that
  • 00:01:55 name I will name it J WTF you kind of
  • 00:02:00 resemble this off here or maybe off dot
  • 00:02:04 JWT makes even more sense and then we
  • 00:02:06 have to point Q Delaware now the
  • 00:02:09 middleware path is taemin so this
  • 00:02:12 package
  • 00:02:14 then kwt off and in there
  • 00:02:17 we got a middleware folder named space
  • 00:02:19 basically and then we have to get user
  • 00:02:22 from token middleware and here we need
  • 00:02:24 to get the class so get user from token
  • 00:02:26 as the name implies fetches the user
  • 00:02:29 from the token and validated so it
  • 00:02:30 basically does what we did manually here
  • 00:02:34 this is what this class does and with
  • 00:02:37 that check in place we can apply this to
  • 00:02:41 any route we want to protect so let's go
  • 00:02:43 back to the API to PHP file and simply
  • 00:02:45 add Milla where's so for example here on
  • 00:02:48 the host route here I want to assign a
  • 00:02:52 middleware and the middleware is off dot
  • 00:02:55 JWT we'll aware of course just like this
  • 00:02:57 I'll do the same for this pointer out
  • 00:03:00 here and for the delete route these are
  • 00:03:03 the routes I want to protect and of
  • 00:03:05 course you could also group them and
  • 00:03:06 sign amble over to the whole group I'll
  • 00:03:09 leave it like this for now what's that
  • 00:03:11 the middleware is in place and let's
  • 00:03:13 first see if this works as it should so
  • 00:03:16 let's create a new quote here and I'll
  • 00:03:19 simply change the content to a novel
  • 00:03:21 quote the token should still be valid if
  • 00:03:24 it is invalid for you simply get a new
  • 00:03:26 one by authenticating again and if I hit
  • 00:03:28 Send and now a quote this works now
  • 00:03:32 let's try a put request to change this
  • 00:03:35 quote now let's quickly have a look at
  • 00:03:37 the quote controller for the put request
  • 00:03:40 we also need to pass the ID of the quote
  • 00:03:42 so if we have a look at the database we
  • 00:03:45 could change one or two let's change one
  • 00:03:49 and we don't pass the ID here we passes
  • 00:03:52 in the URL before the query string here
  • 00:03:54 so just slash one to change quote one
  • 00:03:56 change this to a put request and change
  • 00:04:00 the content to change and let's now hit
  • 00:04:02 send because this is only protected by a
  • 00:04:04 middleware we haven't got our own check
  • 00:04:07 in place there and that looks pretty
  • 00:04:11 good to me looks like it was
  • 00:04:13 successfully changed and we can of
  • 00:04:15 course confirm this by having a look at
  • 00:04:17 the database what we see change
  • 00:04:19 so our middleware protection here seems
  • 00:04:21 to work but now we did it'll just a bit
  • 00:04:24 works right what happens if we provide
  • 00:04:27 an invaluable
  • 00:04:28 touken here if we do this then we get
  • 00:04:31 detailed cannot provided error and the
  • 00:04:34 sense of course true if we strip the
  • 00:04:36 token all together then we get this
  • 00:04:38 error Hugh if you're wondering why the
  • 00:04:40 error message changed that is that the
  • 00:04:43 or because the UM DTU package has its
  • 00:04:47 own error messages in the arm in the
  • 00:04:50 middle where where we're using here so
  • 00:04:52 it overrides our handler if you want to
  • 00:04:55 change this behavior you can find a
  • 00:04:58 description on the documentation of the
  • 00:05:00 package I showed you earlier in one of
  • 00:05:02 the last videos where you can see that
  • 00:05:04 it requires a couple of events whenever
  • 00:05:06 the validation fails and you can hook
  • 00:05:08 into those events listen to those level
  • 00:05:10 events and overrides the error message
  • 00:05:12 there but I'll leave it as it is because
  • 00:05:14 typically you don't display this error
  • 00:05:17 message to user anyways you just need a
  • 00:05:18 kind of identifier to to see which error
  • 00:05:21 messages is to check this in your
  • 00:05:22 front-end code and then display a
  • 00:05:24 user-friendly error message anyways but
  • 00:05:26 yeah enough of that let's remove this
  • 00:05:30 check here in the post code message
  • 00:05:31 because we're now using the middleware
  • 00:05:33 we don't need it anymore
  • 00:05:34 but how could we now retrieve the user
  • 00:05:36 if we still need it well we can simply
  • 00:05:39 get the user by using the chat uh beauty
  • 00:05:42 of off the safe and then parse token
  • 00:05:45 again as before but now not authenticate
  • 00:05:48 we don't need to do that we already
  • 00:05:49 authenticated the user in the middleware
  • 00:05:50 instead we can call to user and what
  • 00:05:53 this will do is it will give us the user
  • 00:05:55 only call this if you are sure that you
  • 00:05:57 already did validate the token and
  • 00:05:59 authenticate the user which we did with
  • 00:06:01 the middle aware because this will not
  • 00:06:03 check if the token is valid it will not
  • 00:06:05 check if the user exists and so on it
  • 00:06:08 will try to give us that user encoded in
  • 00:06:11 the token so it definitely only run this
  • 00:06:14 code if you did check the validity
  • 00:06:15 before with that though we get access to
  • 00:06:18 the user because now use it to assign it
  • 00:06:20 to a quote I will simply return it in
  • 00:06:22 the response so that we can see that
  • 00:06:24 this does indeed work and with that back
  • 00:06:27 you postman if we change this to a post
  • 00:06:30 request like and try to create a new
  • 00:06:31 quote therefore change the URL and make
  • 00:06:33 sure to pass the token again if it
  • 00:06:36 expired
  • 00:06:37 make sure to a penta Kate again to get a
  • 00:06:38 new one
  • 00:06:39 and then change this to a new quote
  • 00:06:42 let's end now we see that if we turn it
  • 00:06:48 too pretty here we get the quote return
  • 00:06:51 we also receive the user so retrieving
  • 00:06:54 that from the token worked fine this is
  • 00:06:57 how we can use a mail aware and then
  • 00:06:59 still get access to the toolkit but use
  • 00:07:00 the middleware to protect the route
  • 00:07:02 without repeating our code all over the
  • 00:07:04 place with data blaze our back-end
  • 00:07:07 authentication works we can now protect
  • 00:07:10 our routes the next of us goal is to go
  • 00:07:12 back to the front-end and implement some
  • 00:07:14 code in angular 2 and view chairs q well
  • 00:07:18 get to token there to store the token
  • 00:07:20 and send the token to authenticate our
  • 00:07:22 front end user