Javascript localStorage: prevent invalid tokens

Question

I am learning VueJS with vue-cli.

The app starts with the /login route and, if the token is set I route the user to /dashboard, here is how I do it:

router.js

{
      path: '/',
      redirect: '/login',
},
{
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta:{
        requiresAuth: true
      }
},

main.js

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    //Non logged
    if (!store.getters.isLoggedIn) {
      next({
        path: '/login',
      })
    } else {
      next()
    }
  } else if (to.matched.some(record => record.meta.requiresVisitor)) {
    //Logged
    if (store.getters.isLoggedIn) {
      next({
        path: '/dashboard',
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

store.js (my store file)

const state = {
  status: '',
  token: localStorage.getItem('token') || '',
  user: {}
};

When logging, the app sets localStorage.setItem('token', token). So this works ok.

The only point is that I can manually set the token in the Chrome Dev Tools > Application > Local Storage and set it to 123, then navigate manually to /dashboard and the route is showing, of course at this point all other API calls will not work as the token is invalid, but I still see protected pages.

Is it just normal behavior? Is there a way to watch for localstorage change and send an API call in that moment?

this is a normal behavior because your app is looking for token and isn't connected to your jwt backend. you can make an api call once user enters /login to validate the token — Max Svidlo, May 16 '19 at 13:15
Yes it is called serverside sessions, make a call to the backend and verify they can access apis and such. — epascarello, May 16 '19 at 13:15

score 2 · Answer 1 · answered May 16 '19 at 13:21

Persisting data on the user's computer, when the user cannot delete the data, can be associated with malware.

I would ignore the user being able to change the token, as it isn't your problem, and the average user would not know how to do this anyway.

If you wanted to watch the localstorage for changes, see this answer here.

EDIT: changed link specific for vue, not angular.

Javascript localStorage: prevent invalid tokens

1 Answers1