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
20. Authenticated middleware

Episodes

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

Transcript

00:00
So hopefully our middleware stuff is making a lot more sense now.
00:03
Now let's just take a break and implement the redirective authenticated middleware. And this will apply to the login and the register routes. If we already have an account, we don't need to do anything. So let's get rid of that example middleware from here, and this is
00:17
going to be redirect if authenticated. Okay. Let's grab redirective guest. It's exactly the same thing.
00:26
We just want to make sure if we are authenticated, we go over to an appropriate page like the dashboard. So let's change the name of this over to redirective authenticated, and let's go ahead and apply this to both of these routes.
00:39
So remember we have our meta object. We have our middleware array inside of here, and we're going to say redirect if authenticated. Remember not to invoke that.
00:48
And we'll do exactly the same thing for our register page as well. Okay. All that's left to do is go ahead and sign in and make sure this is working. So let's sign in.
00:57
And we're signed in. Let's try and access the register endpoint. And you'll notice that we can still access this. Okay.
01:05
So we're doing everything right, but there's a little bit of a problem here. Remember a little bit earlier when we set up our main JS file, we attempted authentication, and then we went ahead and mounted the app. Now, because we're using our app router before we attempt, by the time the
01:23
routers loaded and our middleware is run, it's not going to have any effect on updating our state. Let's go over to redirective authenticated. Go ahead and console log out on the authenticated and let's grab
01:38
the user out here as well. So let's do both of these and let me show you what I mean. So if we go over here and check out the console, you can see that this ref here, which is our user.
01:50
In fact, let's go ahead and grab the direct values from both of these. You can see that we have nothing in here. So it's just a completely empty object. So what we're going to do as a simple fix is we're going to move our
02:05
router registration only when we have authenticated and that's going to solve the problem. Okay. You can see I was already redirected here.
02:13
But if I try and access the login page or the register page, sure enough, our state is now working properly. Okay. So if I log out and I try and access the dashboard, everything's working nicely.

Episode summary

In this episode, we dive more into middleware and specifically set up the redirectIfAuthenticated middleware. This middleware helps us out by redirecting users who are already logged in—so if someone is signed in and tries to visit the login or register pages, they’ll get pushed over to the dashboard instead. Makes things a bit more friendly and logical.

We start by cleaning up our middleware, removing the example one, and then adding redirectIfAuthenticated to the login and register routes using the route's meta middleware array. It's basically almost the same as our guest middleware, just flipped around.

After wiring it up, we test everything, but notice a little issue: even when signed in, users can still reach register and login. Turns out, it’s all about how the app initializes. The middleware doesn’t know about the user's authentication state yet, because routing happens before the auth check is done in main.js.

We fix it by ensuring the router only boots once authentication has been checked. After this change, everything behaves as expected: authenticated users can't get to login/register and are pushed to where they belong. We wrap up by testing logging in, logging out, and hitting the dashboard. Everything's working smoothly!

Episode discussion

No comments, yet. Be the first!