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.
21 episodes•1 hr 35 mins

Overview

Learn how to authenticate with a Laravel API from Vue using the Composition API.

We'll start by setting up a fresh Laravel project with Sanctum and Fortify, configure everything step-by-step, and then implement the ability to authenticate from Vue with a simple auth module — thanks to the flexibility of the Composition API.

In the second half of the course, we’ll create our own beautiful starter kit with more features, including registration and middleware to protect routes.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!