- So we're almost done with authentication
and there's just one more thing we need to take care of
and that's logging users out.
So that is going to happen right here on the app.viewfile
and we're going to need to create another section here
and this is going to be methods.
Methods are just different functions
that you can run on the components.
So we're going to need to put in
a new method here called logout,
and this is going to be a function
and then we're going to use the firebase object here
and authenticate, use the authenticate library.
And we're going to use a single function called signOut.
So this function doesn't really take any values,
all it does it take the current user
and, of course, sign them out.
So once that's done, because this is a promise,
then we can run a statement here,
and I'll use arrow functions to go ahead
and set the user to null.
So once we are done,
and this is an arrow function so it needs the arrow.
So this will reset the user so that any information
we were displaying previously will disappear.
And then we need to issue a router
oops, a router
push and go to the login page when somebody logs out.
So let's go ahead and save that,
but the only problem with this is
that I don't really have a link or anything to logout.
And we should probably also fix all these menu items
so that they only show certain things
when it makes sense based on whether a user
is logged in or out.
So let's go ahead and take care of that,
we'll go to our template and the page
that we are looking at is actually the home page,
so, let's take care of that one.
We are passing along this user information here,
so what I'll do is I'll create a div,
and I'll put this welcome back information in there,
and in this div I'm going to use a v-if statement,
so this is just a conditional way of telling UJS
to do something only if an expression evaluates to truth,
or truth-e how you say in JavaScript.
So v-if user, so if the user information exists
and I'm going to give a class of text-center here as well.
So then it's only going to display this stuff
if the user information exists, which, right now, it does,
because we are still logged in so it's not
going to look any different for the time being.
We're going to add a logout button here.
So we will do a comma, space, and then an anchor tag,
we'll color it blue or the primary color,
and it'll say "logout".
And because this is an anchor tag,
I'm going to give it a role of button,
because it's going to act as a button.
And that's just for text readers
so that they understand that is going to act as a button.
And we are going to add an event here
so whenever somebody clicks on this,
what I'll do is I will send something to the main component,
and we do that through a special property here called emit.
And emit, it's going to tell the main component
to execute the logout function.
So let's save that, and my formatter
is going to make it look really nice,
so this creates a button
and that button is going to allow people to logout,
so now we have a way of logging out which is great.
So if we click on this,
well actually before we do that we need to make sure
that that event is captured in our app.viewfiles.
So in the sub component you are creating
that emitting of the event, so we need to make sure
we capture it and here we're going to say
the logout event is going to execute
the local logout function that we just created.
So let's try logging out,
and you can see that now it took me to the login page,
right, and if I go back to the meeting log,
you'll see that I no longer have
that little welcome sign.
So we're going to need to fix more of the navigation,
let's go ahead and take care of that in the next video
since it's quite a lot of tiny little steps
that we have to do.