Improving the UI Messages to Reflect the Authentication Status in MEAN Stack
In our previous section, we successfully improved the UI header. We will do the same thing for our messages. We want to show the edit and delete button only when we are authenticated. We will implement the same logic which we implemented in improving the UI header. We will do the following steps to do that:
1) We will go to the post-list.component.ts file and inject our auth service in the constructor like this:
2) Now, we again need to set up a listener, so we will add a private property for the subscription, i.e., authStatusSubs, which will be of type subscription. In this component, we already set up the ngOnInit() and onDestroy() method. We will go to the ngOnInit() method, and here we will set up the listener next to our post-service subscription. We will call the getAuthStatusListener() method of our authservice and attach the subscribe method to it.
We know that that result of the subscription call is the subscription, and we will store it into the authStatusSub property.
We need to do something in the subscribe method. In the subscribe method, we know that we get the result of type Boolean. We will store that result in a new property, i.e., userIsAuthenticated.
3) We also need to unsubscribe the authStatusSub on the onDestroy(). We will do that in the following way:
4) Now, we will use that UserIsAuthenticated property in our template. So, we will go back to our post-list.component.ts file, and we know that we need to restrict that mat-action-row, which has edit and delete buttons. So, we will set *ngIf equals to userIsAuthenticated.
Now, the edit and delete button should only be shown when we are authenticated. We save all the files and go to our angular app. We will not see the edit and delete button if we are not login. So, in the case of an unauthenticated user, it will work fine, but if the user visits this after login, he will not see the buttons too.
Now, the problem is in the post-list component. We are setting up our listener, and it means whenever we push that authentication information, this will be updated here. The problem is that the post-list component is loaded after we logged in because we have navigated to it. The ngOnInit() method only runs after we have authenticated ourselves. So, it means there is no new information being pushed after the post-list component has been created, and we don’t fetch the current information here, and we just push new information.
5) There are a couple of ways of solving this. Using a different type of subject is one of them. There is a subject which automatically should yield us the previous value, but we will use a very straight forward way instead. In authservice, we will add a new property. i.e., isAuthenticated, which we will set to false initially. We will set it to true in the same place where we push that information.
6) We want to do that if we have a token. We will first of all check if we have that token because we could have got a response that contains no token. So, only we have a token, we will set isAuthenticated to true and set the listener.
7) Now, we have this isAuthenticated property. We can add a new method at the top, i.e., getAuthStatus() and there we will return this isAuthenticated
8) Now, we will call this method to find out whether the user is authenticated. So, in the post-list component, we will simply call that method to get that info.
Now, we save all the files and try to see the message after login.
Everything is working well, and now we need to connect the logout buttons. We also have another issue, and that is if we are not authenticated, we can still create a new post by manually entering the URL, and we want to prevent this. We will do all these things later in the next section.