Connecting Logout Button and Redirecting the User in MEAN Stack

In our previous section, we successfully improved the UI header and UI messages. In this section, we will learn how to connect the logout button and how to redirect the user to the MEAN Stack. We will learn both the things step by step, and we first learn how to connect the logout button to the app. We will use the following steps to do this:

1) We will go back to our component.ts file and add a click listener to the logout button. We will execute the onLogout() method on the button click.

2) Now, we need to add this method in the component.ts file. This method should clear the token and inform all interested parts on the page about the changed authentication status.

3) We need to edit the auth service again, and there we need a new method, i.e., logout. In this method, we want to do two main things, i.e., we will set the token to null to clear it and set isAuthenticated to false.

4) Now, we need to pass that information to anyone who is interested. So, we will use our authStatusListener subject and push a new value, which is false because the user is now not authenticated anymore.

5) That logout method should be called from within the onLogout() method in the header component. So, there we will reach our authservice and then call the logout() method.

We will save all the files and go to our angular app.

Everything is working well, and now we will learn how we will redirect the user. We will use the following steps to redirect the user:

We will implement the redirection logic in our auth service, and the auth service is a great place to do things because there we do both logging in and logging out.

1) So, to redirect the user, we will have to inject the @angular/router. We will add a new argument to the constructor, which is of type router. A router is an object or a class imported from @angular/router.

2) Now, we will use it in the login() method. In the subscribe method, when we know that we have a valid token, there at the end, we will reach out to our router and call the navigate() method. We want to navigate to the home page, so we will pass slash(/) to that function.

We also want to navigate there if we do logout. There once we cleared everything, we want to leave the page on which we are and go back to the home page.

Now, we will check whether we will redirect to the home page after login or logout.

3) Redirecting to the home page is working well. We might notice that we have to wait a very short time span if we click login. The time is taken for us to send that request and validate the user on the server. It would be nice to show a spinner there. That is just a minor thing, but we want to add such spinners to the login and signup components. We already have the spinner component included in the app to add a mat-spinner below the button in the signup and login components. For that, we need to know if we are loading or not. We went to Loading property in both components already, and we just need to set it when we are loading.

So, in the onSignup() method, we will set Loading to true and the same in the onLogin() method.

Login:

Signup:

4) Now, in the templates, we will use it. We want to hide that button if we are loading, and at the same time, we want to spin them.

We will implement the same logic for our signup component.

Note: We already implemented the <mat-spinner> at the top, so we will suggest that you to remove that <mat-spinner>, which we implemented below the button in the login and signup component templates.

Now, we will go back to our angular app and try to login or signup to check whether our spinner is working well or not.

Everything is working well. The next thing is to guard routes because we can access the new posts page by going to that URL. We will do that later in the next section.