How to properly check authentication with Vue.js (Vue router) and Django

Question

I am trying to check if a user is authenticated on protected routes in vue-router . I have Django rest framework that sets sessionid on login.

I have seen people using vuex or local storage to store session information. But, If the token was forcibly expired on the server-side a user will be allowed to navigate since localStorage still says IsAuthenticated=true . In this case, is it the best choice to make a request to the Django backend such as fetch("url/auth/authenticated") ?

Answer 1

Please consider adding routing guard on protected routes.

Vue Router permits you to do stuff before entering any route.

The following docs get you covered. Do remember that your API response is what rules you front end. So for checking if a sessionid is still valid, you can create an endpoint to do that and when it respond with an expired state, your frontend should unset everything related to the session in your vuex store and from the local storage, then redirect the user to the connexion page!