Vue Router Guard Method still allowing page load

Question

I am using the following guard const to prevent user from entering pages while they don't have a token saved on cookies. However if i try it enough time the user is able to enter the page but the components don't load, is is just a blank page

What else should i add to my router file to prevent this kind of thing from happening?

Here is my guard constant:

const guard = function(to, from, next) {
  const token = Cookies.get('token')
  if(typeof token === 'undefined' || token === null ){
    this.$store.dispatch('logout')
    window.location.href = "/";
  } else {
    next();
  }
};

Boussadjra Brahim · Accepted Answer · 2020-04-24T14:07:15.390

1

Try to use next('/') instead of window.location.href = "/" :

import store from 'path/to/store/
const guard = function(to, from, next) {
  const token = Cookies.get('token')
  if(typeof token === 'undefined' || token === null ){
   store.dispatch('logout');
    next('/');
  } else {
    next();
  }
};

edited Apr 24 '20 at 14:07

answered Apr 24 '20 at 13:49

Boussadjra Brahim

82,684
19
144
164

it is also giving me the following error: Cannot read property '$store' of undefined But i declared my store in main.js – Otorrinolaringologista -man Apr 24 '20 at 13:56
import it in th router file as you did in main.js `import store from 'path/to/store/` – Boussadjra Brahim Apr 24 '20 at 14:11

Vue Router Guard Method still allowing page load

1 Answers1