Logging out

- [Instructor] In this video, we'll add a Logout button so we don't have to keep deleting our token from local storage in order to log out manually, and we'll also only show that logout button if they are already logged in. Let's begin by going over to our frontend project. Then let's go over to our auth.service.ts and create a logout function. We'll call localStorage.removeItem, and we'll remove 'token'.

Let's close that and then open up our nav.component.ts. Let's add a new button by copying the login button on line 10, pasting it below, and calling it logout, and we'll get rid of the router link and instead we'll add a click binding, and we'll set it to auth.logout. We'll also need access to our AuthService inside our NavComponent now, so let's bring that in.

Then let's inject it with a constructor. Now let's give it a try. Inside our browser, we can see we have our token, and if we hit Logout, we can see it's removed. Next, let's only display the logout button if we are currently logged in. So let's open up our AuthService again and we'll add a getter called isAuthenticated. So below our constructor, let's add that with get isAuthenticated.

What we'll do is we'll return localStorage.getItem with the key being 'token' but this will actually give us the value of the token. We want true or false depending on whether it exists or it doesn't. So if we add an exclamation mark in front, it will give us true if it doesn't exist and if add another, it'll give us true if it does exist since it's a double negative.

Now let's go back to our NavComponent and add an if condition. So on line 11, in our logout button, I'll add ngIf and we'll set it to auth.isAuthenticatd. Let's save that and give it a try. So we no longer see the logout button. Let's try logging in. And now we've logged in, I see the token, and I also see our logout button. Let's do the same for our register and login button and only show them if we're not logged in.

So I'll copy this condition and paste that on line 9 and 10, and then I'll show it if not authenticated. Let's save that and take a look. So we're no longer seeing Register or Login but as soon as I hit Logout, we see them once again. So we have logging out, logging in, and registering working. We're also able to add new quizzes and associate them with users and we're able to add questions to those quizzes.

Th last thing we need to implement is being able to play a quiz. Let's take a look at that next.