React PrivateRoute's content is visible to other logged in users

Question

I've created a React App which has the flow as following:

• User Logs In Dashboard is opened
• A list of books appear (written by the user)
• User clicks on manage books
• A new window opens which has information of that book. (Private Route)

Now the question is, the Private Route is only accessible if the user is logged in, and this works fine.

But when I try to copy the URL of the Private Route and open it in a new window, by logging in with a second account, the user sees the content of first user.

So my question is, how to restrict access of content to the specific user only?

Please help! A simple logic will help me.

Answer 1

I don't know for sure your app structure and I will assume that :

1. user2 tries to reach url /bookstore/bookOfUser1
2. user2 is not logged in, so he is then redirected to url /login with a mechanism storing the url that the user wants to access
3. user2 logs in, is redirecte to /bookstore/bookOfUser1 and an api call is made to get the book details with a book id (bookOfUser1)

During the step 3, when fetching the data, your backend should check if the user2 has the access rights to read the book details bookOfUser1. If so, your backend should send the details, if not, it should send an error handled by your frontend. Your frontend would then redirect to a fallback url.