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
16. Logging out from the navigation

Episodes

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

Transcript

00:00
It's going to be really annoying to have to keep clearing out our cookies every time we want to log out. So let's go ahead and implement the ability to log out directly from our navigation. Okay.
00:08
So if we head over to our navigation component, let's look for log out. We'll have a couple of these links. So we'll have one in the mobile navigation and one in the other navigation. And speaking of which, let's go and just make sure everything looks good here.
00:25
And you'll notice that with our mobile navigation, we still have both of these links in. So under the mobile nav section, just here, let's go down to the log out and log in links and just update these accordingly. So let's say V if authenticated, and here we'll say V if not authenticated.
00:46
So you can add any other link sheet in there that you need. Okay. So to log out, let's go ahead and say V on click. And we will of course call that log out method.
00:57
We'll do the same thing for the desktop version of this as well, or the larger viewport version of this. So V on click and log out. And if we just remind ourselves, we've got this log out link here.
01:10
But again, what we want to do is redirect the user once they are logged out. So we're going to create out a log out function directly in here, which calls this log out action. So we can alias that from within the import.
01:24
And then we're going to say log out action. And then once again, we're going to use our router to redirect. So let's import our router. And once we have logged out, let's say router push.
01:38
And where do we want to redirect to? Well, in this case, it can just be the homepage. Yeah, I said two. And of course that needs to be now.
01:46
Okay. Let's just try this out again by logging in. And we're logged in over on our dashboard. When we log out, we're redirected home.

Episode summary

In this episode, we're tackling the classic annoyance of having to clear out cookies manually to log out. Instead, we add a log out button directly in our app's navigation, making signing out way more user-friendly.

First, we jump into our navigation component and look for where our log in and log out links live—both in mobile and desktop views. We clean up the display logic a bit so that "Log out" only shows if the user is authenticated, and "Log in" only shows if they're not.

Next, we wire up the click handler for the log out button. When it's clicked, we trigger our log out method, which handles the sign-out process. But we're not stopping there—we want to be sure the user is redirected once they're logged out. So, after logging out, we programmatically use our router to send them back to the homepage for a clean user experience.

After implementing the changes, we do a quick test: logging in, then logging out, and watching the user get sent straight home. No more manual cookie clearing!

Episode discussion

No comments, yet. Be the first!