Create a service class getter isAuthenticated check.
- [Instructor] Let's give the user a greeting with their name on the top right of our Nav bar. That way they will know if they successfully registered or not. To do that, we can also pass along and store their name with their token. Back in our note server let's create an object that will pass back that contains both the name and the token. So on line 43, instead of just passing the token, we'll create an object. So currently, this object just contains a token. Let's add the first name to the front. (typing) And that should be it.
Let's save that and give it a try in our Angular app. (typing) And let's take a look at our network tab under register and we can see we're now getting the first name. Back in Visual Studio code, let's modify the auth service so that we can store the name as well as the token. So we'll simply copy this line on line 14, paste it below, and then instead of token, I'll specify name and then instead of .token it'll be .firstname.
And let's test that out. And you can see our name and token are both being stored. Now let's create a getter for the names since we will need to display it in the Nav bar. So below our constructor, let's add a Get Name and we'll return localstorage.getitem.
Now since we are hard-coding the name key we would have duplicate code in order to pull up the name from local storage. So let's create a property that will store both the name key and the token key. So below our base URL, let's add some more properties. Name, key, and we'll set that to name. And then token key and we'll set that to token. Now we can use our name key to retrieve the item from local storage.
And as well to set it. So we'll set the token and we'll set the name using our new key properties. Let's go over to our Nav component which we haven't visited in a while and import our auth service. (typing) And then let's inject it with the constructor.
Now inside the html, let's create a new button after our last so I'll copy our register button. And we will write "Welcome" and the user's name by binding to authservice.name. (typing) And let's save that. We make it a button so that at some point in the future, we can implement a profile component that will allow us to make account changes.
Let's take a look at our app and you can see it's already working. Now let's try removing the first name and a token from local storage to simulate logging out. So I'll right-click on token and select Delete and the same with Name. Now let's refresh our page. As you can see it's saying, "Welcome" but we're not logged in and we don't have a name. And obviously, this is not the desired behavior. We could just use an NGF and check if name is set and then display it but we could benefit from an is authenticated getter in our auth service that we might use throughout our entire app.
So back inside Visual Studio code, let's go to auth service and add a getter for that. I'll call it, "Is Authenticated". We could create the more elaborate check to return true if the token is set. And false if it's not. But a quick way to implement that behavior is just to use a double negative of the key. So I'll just return the double negative of local storage.getitem this.tokenkey.
So essentially if this exists we're returning true. If I didn't use this double negative we'd actually get the value which not exactly what we want. We want to return either true or false. Now let's go add our NGF to our Nav component. So in our button tag, let's add that NGF. And we'll set it to auth.isauthenticated. Let's give that a try. As you can see, it's no longer there. And so we're not seeing an empty welcome.
Now let's try to register. (typing) And it appears. Let's quickly remove our token. And you can see it gets removed. The next thing I would like to do is redirect to the default route once the user's successfully registers. Let's go back in our auth service and Visual Studio code. And since we will be redirecting, let's import router. (typing) From Angular router.
And then let's inject it into the constructor. (typing) Then upon receiving the response of register, let's check if the token is valid. So inside our subscribe arrow function, let's create a variable that stores our response. And in here let's check if the token's valid. (typing) If it's not valid, let's just return.
If it is valid, let's go ahead and set it inside our local storage and we'll use our new auth response variable. And then we'll finally do our redirect. With this.router.navigate and we'll pass an aray with the first element being the slash which will redirect us to the route of our app or our default view. Let's give that a try.
And we're seeing the greeting and we're also redirected. And finally, the name of the token are inside our local storage. Finally, I like to finish off by improving the Nav bar layout just a bit. Let's move the name to the right side. To do that, I'll use a custom style with a flex property. So let's got to our Nav component and above our register button, I'll add in a span, (typing) with our flex style.
With the value of one to one and auto. Let's take a look at that. Now we can see that our register and greeting are pushed to the right. Next, let's taka look at logging out.
- 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.