- [Narrator] All right, so let's do
the part two of the last thing that we needed to do
to finish up the authentication,
which is just fixing all these other places
where I'm sayin' "Log In" and "Register"
so that they only show up when necessary.
So, let's go ahead and start by "Log in" in a user.
And we'll go back into this Meeting Log,
and we'll modify all these different things;
and we also need to add a "logout" button up here.
So let's take care of that.
We'll start off in the "Home.vue" file.
We have a bunch of buttons down here towards the end
and what I'm going to do is
go ahead and just add a series of v-if statements.
And we'll say, "If the user doesn't exist,
then show the 'register' button."
And we'll just copy that one.
I usually like to have my v-if statements
and other statements at the end of my tags.
So you'll see that usually I follow this structure where I
add any classes that are unique
at the beginning of class names.
So I can say, like, "special" here.
I would put it here at the beginning,
and then I use any framework, sort of, classes after that;
but when I'm actually putting
in code related to the framework,
like if statements and such,
I put those right before the closing tag.
I just try to be consistent so that they're easier to find.
So we'll also do that for "Log In"
and for "Meetings,"
we're going to do, "the user exists
"then show the 'Meetings' button."
So that should mean that we're only seeing
the "Meetings" button right now because we're logged in.
If we clicked on "logout," we would be able to see
the other two buttons now.
So this page is sort of done.
We've got this showing up
only if the user is logged in.
And so we need to fix the navigation.
Let's go ahead and do that.
We'll go over to "Navigation.vue."
Before we do that though, however,
and I'm not sure Navigation knows about the user,
so we're going to need to
make sure that we pass along that as a prop, okay?
That also means that we need to capture it in Navigation.
We'll need to add a script here,
and I'll go ahead and add a name,
and then add a "props" section here,
and pass along that user information here.
So I saved that,
and now I can add my v-if statements wherever I need them.
I'll also need to make sure that I pass along
the button to log users out.
So let's go ahead and take care of these links first.
So, actually, this is just a title,
so I don't need to put something in there,
I need to do something here in "meetings."
So it's only going to show the meetings if the user exists.
The "log in" will only be shown if the user doesn't exist.
And "register" will only be shown if the user
doesn't exist as well.
So now we need to create a link to logout.
This isn't going to be a router link
because it's not going to take you anywhere.
So it's going to be a button.
It's going to get some classes.
And then we're going to add a event
so that we're going to check for a click;
and when a click happens,
we're going to emit an event to the pairing component.
This is similar to what we did before,
but we're just doing this inside Navigation.
And we'll emit that event called "logout,"
and so we need to put the text in here, "logout."
All right, so we are emitting the event, but again,
I need to make sure that Navigation understands that event,
so I'll go back into "App.vue."
And make sure that I copy this right here
so that
it knows that that event needs to get passed on
to this local "logout" function.
So let's check that out.
And now we have "meetings" as well as a "logout" button.
The "log in" and "register" links aren't showing.
So let's go ahead and logout, and then go back.
Notice that now I have "log in" and "register" back
'cause nobody's logged in.
And if we go back into the Meeting Log,
you'll see that we have "Register"
and "Log In" in here as well.
So there's always a bit of wiring up
that you have to do when you're working with Vue.js.
Once you've been working with Vue.js for a while,
you'll get used to all the little wiring steps
that you need to do.