Passing the User Id to the Frontend in MEAN Stack
In our previous section, we successfully added the server-side authorization. In this section, we will pass the user id to the frontend. Right now, every user can click on the delete button, even users who are authenticated but didn’t created the post. We will adjust our frontend code.
We will go to the post-list component, and there we are showing the edit and delete button to any user who is authenticated. But it is not correct anymore now. We want to restrict it more. We only want to show these buttons to those who are authenticated and the creator of that post. Now, it means we need to get the user id to the frontend first.
1) We will go back to our js file, where we create the login route. We will reach out to where we returned the token and expiresIn. Now, we don’t just want to return the token and the expiry. We also want to return the user Id in the following way:
2) After passing the user id to the frontend, we need to store that information on the frontend too. We will go back to our service.ts file where we are sending that login request. There we will create a new property, i.e., userId, which will be of type string. In the login function, we will set the value to the userId property when we get back to the response. For that, we need to update our typescript code too because now we also have the userId field too with the token and expiresIn.
3) Now, we can use this userId in our application. For that, we will add a new method, i.e., getUserId(). In this method, we will simply return the userId like as:
4) Now, we will get that user Id from our post-list component because we need to compare it against the Id of the post we are looking at. So, we will go back to our post-list.component.ts file, and there we will add a new property, i.e., userId and initially, it will be undefined. After that, we will fetch the userId in the ngOnInit() method and assign it to the userId property.
5) We also want to fetch the updated user Id in case the authentication changes. So, it means that we also set userId in the listener to our AuthStatusChange.
6) We want to fetch null or undefined from the getUserId() method in the listener if the user switches from authenticated to unauthenticated. Therefore, we have to reset the userId field in the auth service whenever we are logging out. So, we will set userId to null in the logout() method.
7) Additionally, we also get our autoAuthUser() method where we sign in the user based on data we have stored in local storage. We are not storing the userId in local storage yet, but we need to do this because we need that information in the future too. So, in the saveAuthData() method, we expect to get one extra field, i.e., userId, and it is of type string. We store it like this:
8) We also need to remove that data in the clearAuthData() method too.
9) In getAuthData() method, we also need to get it. We will get it in the following way:
10) Now, in the autoAuthUser() method, we also initialize the userId with our auth Information.userId like as:
11) The last thing we have to do is that we are expecting userId as an argument on saveAuthData(). So, we pass the userId to the function from where we call it.
Now, the userId is managed correctly, and in the next section, we will use it together with the creator Id attached to the post.