Log the user out by removing their token and first name from local storage.
- [Instructor] We have been deleting our local storage items manually to log out. So let's create some log out functionality that does just that. Let's begin by adding a log out button to our nav bar. We can start by copying the greeting button. We will need to keep the is authenticated check since we only want to offer a log out option if they are logged in or if they are registered. Then we will change the text to logout.
And we will add a click directive and set it to authservice.logout. So let's replace the router link since we won't be changing the view and we'll add a click binding to auth.logout And of course, this function does not exist yet so let's create it now. Let's go to our auth service and below register let's add logout and we'll simply remove both tokens from our local storage.
Let's give that a try. So let's register and as you can see, we now have our logout button so let's hit that and once we hit the logout button, both keys disappear from our local storage and we no longer see the two buttons. But, one thing to notice is that when we do register we still see the register button. Maybe we should hide that.
So back in Visual Studio Code in our nav components let's add our ngIf is authenticated and we'll use it for our register button as well but we'll show it if they are not authenticated. Also I noticed the router link for our welcome button is still set to the old register link and that's not a real problem at this point since we don't have an account or profile view, but let's just go ahead and just set it to our root for now. So I'll just remove register on line 12.
Let's give that a try. We are logged in and we no longer see the register button. Let's logout and now we see register. All of our register functionality seems to be in order. Now let's focus on logging in a user that has already registered.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.