CODEWITHSUNDEEP
javascriptvue.js
Mr.Web
Mr.Web

Reputation: 7176

Javascript localStorage: prevent invalid tokens

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?

Upvotes: 0

Views: 571

Answers (1)

Kobe
Kobe

Reputation: 6456

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.

Upvotes: 2

Related Questions