Authentication with Laravel Sanctum and Vue
This episode is for members only

Sign up to access "Authentication with Laravel Sanctum and Vue" right now.

Get started
Already a member? Sign in to continue
Playing
18. Middleware pipelines

Episodes

0%
Your progress
  • Total: 1h 35m
  • Played: 0m
  • Remaining: 1h 35m
Join or sign in to track your progress

Transcript

00:00
At the moment, we've got an issue. If we are signed out, we can still access our dashboard. So in this episode, we're going to talk about middleware pipelines. And we're going to build out a little bit of code to run through a bunch of middlewares
00:14
to do something. This could be absolutely anything. But in our case, it's going to be when we land on the dashboard within the router, when we hit that route, is the user authenticated?
00:25
Well, if they're not, we're going to go ahead and push them over to the login page so they can sign in. So let's go ahead and get started on creating out this middleware pipeline. OK, so let's go ahead and close off our API project.
00:38
We're not going to need that. And let's go ahead and open up our router. So let's find our router index in here. And let's think about first how we would want to define this middleware.
00:49
So under our route just here, what we can do is pretty much add any custom data that we want. So we could add a meta object in here that contained a bunch of middleware. So this is going to be an array of middleware. And the pipeline that we're going to be building will allow you to define multiple middlewares
01:10
on this particular route. OK, so we're going to go ahead and build out a really simple piece of middleware just to demonstrate this so we can focus on the pipeline. And then we'll be good to go.
01:20
So we can put this anywhere. I'm just going to put this in the main directory here. But you could add it inside of your router if you wanted to. And let's go ahead and create out just a pure JavaScript file here called example middleware.
01:33
And all this middleware is going to do is just console log something out. So let's define the structure of our middleware out first of all. So we're just going to export an object in here with the name of the middleware. So let's call this example middleware.
01:47
And I'm actually going to go ahead and just rename this. So let's just rename this to keep the convention of having a lowercase on the first character. We should be good. OK, so now that we've got our middleware, what's going to happen in here?
02:03
Well, what we want to do is call the next piece of middleware once this middleware runs. So if we think about our router here, we want to go through each piece of middleware, call the first one. This will call the next piece of middleware.
02:19
And then if there's no more middleware left, we just end up showing the route. So you could have multiple pieces of middleware on one route, for example. A user must be authenticated and they must also have a subscription maybe that they've paid for. So you kind of get the idea.
02:34
OK, so let's go ahead and pull in this example middleware directly into here. And we don't need to invoke this because our middleware pipeline that we'll create will actually invoke each of these pieces of middleware. Let's get back over to our example middleware.
02:47
So we want to pass into each of our pieces of middleware the next callable middleware or the next callable middleware might not exist. So we just want to show the route. So what we're going to do in here is we're going to return
02:59
next and we're going to invoke that next piece of middleware. So inside of this middleware now, we can do pretty much anything. For example, we could put an if statement in here to redirect the user if they weren't authenticated.
03:10
For now, I'm just going to console log out example middleware just so we know that this is getting called. We could even call the same piece of middleware twice within our stack. So we'll do that just to make sure that everything is called in the middleware stack.
03:23
OK, so back over to the router here. How are we going to hook into the router to call this middleware? Well, we've already got this router in here and view router gives you a before each hook. So before any of these routes are called, we get where we're going to,
03:41
where we're going from and next as well. So let's go ahead and pull this all out into here and just make sure we define this properly in that closure. And the first thing we want to do is check if there isn't any middleware.
03:53
We just want to return the next callable thing. Now, next is going to be the actual route itself at some point. We'll see that in just a second, but let's add in this check. So we're going to say to meta and middleware.
04:06
If it's if there's nothing in there or we could even check if it's empty, then we're just going to return and invoke next. Okay, so next up, we want to go ahead and pull all of our middleware out of here and just assign it to a variable so we don't have to keep referencing it.
04:19
So we'll say to meta and middleware. Now what we want to do is build up the context that we're going to pass into our middleware. So we are going to create that out as an object, and that's going to contain everything that we've already got here to, from, and next.
04:35
And we can pass that into the middleware that we call, and then it will be subsequently added to each piece of middleware. So we want to go ahead and invoke the first piece of middleware. So we just access that array key zero and we invoke that passing in our context.
04:52
So let's spread this out because we are working with an object and we want this to be available as spread out thing so we can access each of these. Okay, before we go over, let's just make sure this is actually a spread out inside of an object and let's go over and try this out.
05:07
So you can see that already our example middleware is being called because we're within the dashboard route. If we go over to the homepage, it's not called. But as soon as we click on that dashboard,
05:17
remember what is happening is we are getting a before each hook. It does have middleware, the route we're trying to access, which is two. We collect up the middleware, we pass the context through, and there we go. So our middleware is now successfully running.
05:32
Now the problem that we have at the moment is if we define this middleware twice, which we can do, we can do the same piece of middleware twice, that isn't going to run twice because what we're not doing is within our middleware, we're not calling the middleware in the next stack.
05:48
So what we want to do inside of this object, as well as the context with next, we want to overwrite the next callable stack with some sort of pipeline. So we're going to go ahead and comment this out for now. And we're going to create out a middleware pipeline in here.
06:05
So let's just create our new JavaScript file called middleware pipeline. And this is going to be responsible for calling the next piece. So inside of here, let's go ahead and export this so we can actually use it. And we'll call that middleware pipeline.
06:20
Into this, we're going to pass in the context that we've just created, not next. So let's pull in the context that we've just created, the middleware, and the index that needs to be called. So remember, we want to call the next piece of middleware,
06:35
which is obviously going to be an increment on the array that we have. So let's pluck out the next middleware that we need to call. So let's grab that from our stack of middleware. And we'll pass the index in.
06:48
And let's just go ahead and console log that next middleware and see what happens. So how do we use this? Well, in here, next is going to be our middleware pipeline. So let's pull that in.
07:00
We know that we need to pass in the context that we've already created. We need to pass all of the middleware in that needs to be called. And we want to pass the index of the next piece of middleware. So we've already invoked the first one.
07:13
We're going to invoke the next one. And then the middleware pipeline will take care of invoking any after that. So we can even do this five times. And it would call each one.
07:23
OK, if we head over to our middleware pipeline, then we should be logging this out. So we should get that logged out. Now, let's have a look here. We've got next is not a function.
07:32
Let's just have a look here. And yes, the reason that this isn't working is because over in our middleware pipeline, we're not returning anything here. So let's go ahead and return context dot next.
07:44
So this actually gets called when we go to the next one. And we'll have a look. OK, so you can see here that now, if we just go to the home page again, when we hit the dashboard, this is going ahead and logging out that next middleware.
07:56
This is the next piece of middleware that we're going to call. And then with this pipeline, we'll just keep on calling it over and over again. OK, so if we don't have any more middleware in the stack, so if we don't have any more middleware, that is when we want to return context dot next,
08:12
which will land us on the page that we need to be on. Let's go ahead and return a function in here that's going to be called. And we'll get a params object out of that. Let's just go ahead and console log params just to see if we get this up.
08:27
And yes, it's just undefined at the moment, which is fine. Now, if we have parameters, then we're going to call the next piece of middleware with them parameters. And we'll have a look at that in just a second.
08:42
We'll come back to that. But the really important part of this is we now want to call the middleware pipeline again and increment the index. So that will just keep on going through the stack,
08:53
and it will just keep calling the next piece of middleware. So again, we want to spread out the context within this object. We're just doing exactly what we initially did on our router. And we want to pass the next piece of callable middleware,
09:06
which again will invoke the same function here, this middleware pipeline, passing through the context, passing through all of our middleware that we need to go through. But the really crucial part about this is we need to increment the index. OK, before we look at anything else here,
09:21
let's go ahead and just head back over to our index and run through this again, because this can get a little bit confusing. OK, so if we don't have any middleware, we don't do anything. We just return next, and we land on that page.
09:32
Otherwise, we build up the context, which is where we're going to, where we're coming from, and the next thing that we need to call. We invoke the first piece of middleware. So that is this piece of middleware here.
09:43
What we then do is the next thing that needs to get called is the next piece of middleware, which will be plucked out here with index one. So this is the next thing in the array. Now, inside of our middleware pipeline,
09:56
what this will then do is pluck out our next piece of middleware, and it will do exactly the same thing down here, but obviously add on to the index. The first time we're accessing the index key zero manually,
10:08
then we are passing this through to our middleware pipeline as the next callable middleware, which is index of one. And the next time this runs, it will be an index of two. Now, if we get to this point and an index of two doesn't exist,
10:21
we are just going to go and return our next context, which will land us on the page. Okay, we'll have a look at these params in just a second, but let's go over and just see if everything's good. And yes, what I did here is I called this middleware pipeline.
10:34
We call this here. This is going to be invoking the next piece of middleware. So remember, we need to invoke the next piece of middleware, then pass the next piece of middleware through to the pipeline,
10:45
which will invoke that when we get to it. So, so on and so forth. Okay, so now, as you can see, we've got two pieces of middleware being invoked whenever we land on here.
10:57
So we can just do this. I'm sure you get the idea as many times as we want, and it will just continue to call any of the middleware that we've defined in that stack.
11:08
So this can be a little bit confusing. It certainly was for me when I first looked at anything to do with middleware pipelines, because it's essentially a recursive process that we go through to call each object or piece of middleware or function after one another.

Episode summary

In this episode, we tackle a common issue: even if a user is signed out, they can still access the dashboard. To fix this, we dive into the concept of middleware pipelines — a way to run several checks ("middleware") before letting someone see certain routes, like the dashboard.

We start by planning how our router can know about which middlewares to use. We decide to add a meta.middleware array to any route we want to protect, so we can easily stack up multiple middlewares (like checking authentication or if a user has a subscription).

Next, we build a simple middleware as an example and wire it up so our router runs through each middleware for a route, one after another. If someone isn't authenticated, one of these middlewares will redirect them to a login page. We set up a system so that each piece of middleware can call the next one (the pipeline), or stop the process early (like redirecting a user).

Throughout the video, we write and structure the code so it’s reusable: you can easily add as many middleware checks as you want per route, and the pipeline will process them in order. We also clarify some tricky parts, like passing the right context information and building the recursive logic to keep everything flowing smoothly.

By the end, you’ll have a clear system for middleware pipelines in your routing — making it easy to protect any routes in your app and run whatever checks you need before letting users in!

Episode discussion

No comments, yet. Be the first!