How to protect admin routes with Vue.js?

Question

I've been using the localStorage to store the JWT token and do the authentication, it works fine because the backend is protected, what is not, are the front end pages in Vue.js and its components, anyone can create a false token in the browser and access the pages, the panel menu, but the data is not loaded because the token is invalidated by the backend. Did you realize that the user will be able to navigate the pages normally? How can I avoid this? Only allowing back-end validated users to navigate the site.

I'm using Vuex and I can not think of a solution. The isLogged state receives the localStorage token, so the user can easily circumvent the browser.

---

I thought of a solution, do not judge me. Before entering each route, send a request to the back end to check the token, if false, remove the localStorage, would this be a good one?

Answer 1

I'd say your solution is a pretty decent one to start with, but I think you can improve it a bit.

Because you're using VueX, what you could do is store the user (or some other variable) in the Vuex Store. Then before each route you can check if the Store has a user.

If the Store doesn't have a user, check if the localStorage has a token. If there is no token, then the user is not authorised to go to the route.

If the localStorage does have a token, call the back-end and check if the token is valid. If the token is valid, store the user in the Vuex Store and continue. If the token is not valid, than the user is not authorised to go to the route.

This will prevent you from creating unnecessary calls to the back-end whilst still having the validation.

Answer 2

Or you could for example in your store state have a user object that has something like 'userRole' this way you could check for Authentication/Token/Role.