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
19. Guest middleware

Episodes

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

Transcript

00:00
Now that we've created our middleware pipeline, we're going to actually
00:02
introduce some useful middleware. And we're also going to talk about the, and we're also going to talk about within our middleware pipeline, where these params come in and what's going to happen when we do actually hit this point.
00:15
Okay. First things first, let's go ahead and actually create some middleware. So let's create our, a redirect if guest piece of middleware, which we can apply to our dashboard route.
00:25
And we'll take the same structure as our example middleware, just so we have something ready to go. Okay. Let's get rid of this and we'll rename this to redirect if guest, and let's
00:33
go ahead and apply it to this route. We'll keep this other piece of middleware in here as well, just so we have it in there and we can see that both of these are working at the same time. Okay.
00:44
So what do we want to do inside of redirect if guest? Well, we want to check if the user isn't authenticated and crucially, we want to redirect them over to the login page. Now we know how we can check if we're authenticated because we have our
00:58
use auth composable, so let's go ahead and destructure this and grab out the authenticated prop that we're storing in there and we'll invoke use auth here. Okay. So let's create a very simple if statement and just say, if not
01:13
authenticated and value, then we want to redirect the user. Now, how do we redirect the user? Do we go ahead and import the router from here to then go ahead and push? Well, we don't need to because we're technically already inside of the router.
01:30
And remember next contains the potential params, which will be invoked over in our middleware pipeline. So if, for example, we don't have any more middleware, we return next here and we just show the page.
01:44
But when we get to this point, if we have any parameters, it means that we need to do something with them parameters. Now these params are exactly the same thing as when we're using our router to push and redirect to another page.
01:58
So what we can do inside of here is return the next object passing in these parameters. So let's go ahead and say name and login. Now we've completed this middleware.
02:11
It's already in our roots. So already with hot reloading, when I try and come over to the dashboard, it already works. So we've successfully implemented this middleware, but what is happening that
02:22
we spoke about in the last episode in here? Well, let's go ahead and console log out these params and see what we get. Okay. So let's go over to our dashboard.
02:32
And you can see that we don't get this at the moment that is just because of the order of our middleware. So this is the last piece of middleware. There's no more callable middleware.
02:40
So if we think about it, this is being run with next, which contains where we want to redirect to. But the reason that we have this and this in here is because if your middleware is in a slightly different order, for example, we do have next piece of
02:54
middleware, but in here we're setting these params, this is where this is going to run. So we do go on to call the next piece of middleware, but we intercept if that previous piece of middleware is trying to do something with any parameters. So if we swap these order around and we head over to our dashboard page, there we go.
03:15
That's our params. We know that we're stopping at this point here. And we're just going to go ahead and do like a push on our router to the next page. So that's relation between these two.
03:27
And this helps. That means that we can do our middleware in any order. And if a piece of middleware like redirective guests forces us to redirect over to somewhere else, we don't run the next piece of middleware in the stack.

Episode summary

In this episode, we dive into actually building out a real piece of middleware for our app! We start by introducing the idea of applying useful middleware to routes, and specifically, we create a redirectIfGuest middleware. This middleware checks if the user is authenticated using our useAuth composable. If the user isn't authenticated, we redirect them to the login page.

I break down how this works inside the middleware pipeline and explain how we use the next function with route parameters to perform the redirection. You'll also learn why we don't need to import the router directly in the middleware, since we're already working within its context.

We test out our logic with some console logs and experiment with the order of middleware to see how the params propagate based on when a middleware decides to redirect. If one middleware causes a redirect, any others in the stack won't run—and that's exactly what we want!

So, by the end of this episode, you’ll have a working guest redirect middleware and a pretty solid understanding of how middleware chains operate and how routing and redirection flow within them.

Episode discussion

No comments, yet. Be the first!