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.
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!