VueJS - How can I check if the user id was changed in local storage so I can check if the token is valid

I have Django back end and a Vue front end. People are able to log in. The user id and token is fetched from the back end and stored in localstorage after successful login. This id is then used in my Vue store so the user can get all the data associated with his account. While logged in you can access all the functionality and see the content associated with user (let's say ID = 1).

Authorization with the back end happens through the token being sent in the request headers by the front end. Is this correct? But the back end (Django) does not check that the token being sent in the header belongs to a specific user, every time a requests happens am I right or wrong?

Because after logging in I can use every end point that requires authentication and I get the data fine. If I delete the token then obviously that stops from happening.

If I change the ID in local storage then I can browse the data of another user because according to Django the token is still valid, because from my observation the token in the request headers is not checked against a user, just that it exists.

My question is then this:

Is there a way for the request header with the token to include a user ID and then for the Django back end to check on every request if the token actually belongs to the user whose ID I am sending in the header.

I have an end point to validate a token but that seems double work and extra overhead.

There is no way for that ID to change in localstorage unless the user goes and changes it himself, which is something I want to prevent, or check if it happened, is the token still valid I send in the headers. Not validate the token on every page load.

I would like to understand the process and of course security.

Back to Top