Vue router Auth-guard function doesn't check Vuex store state

Question

I am trying to set-up an auth-guard for a profile page. I am using Vue (2.0) with vue-router and Vuex for state. My backend is firebase, but I don't think that's imporant here? My auth-guard function seems unable to properly fetch the requiresAuth state.

This is my auth-guard function:

  {
path: "/profile",
name: "Profile",
component: Profile,
meta: {
  requiresAuth: true
}


}
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {  
  console.log('-----------ROUTE GUARD PROPS--------');
  console.log(store.state.user.isAuthorized);
  console.log(store.state.user);
  console.log('----------- END ROUTE GUARD PROPS--------');
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (store.state.user.isAuthorized) {
      next()
    } else {
      next("/Login")
    }
  } else {
      next()
  }
})

And the result in the browser console when changing pages is the following:

The issue here, to be clear, is why the console.log contradicts the isAuthorized in the print-out of the user module's state. For reference, my store has a user and shared module. The user module has a state with two members: user and isAuthorized. Hence the browser output.

Any ideas why these two conflict?

So you're asking why console.log(store.state.user.isAuthorized) and console.log(store.state.user) shows two different things in the console? — Hiws
Well, why console.log(store.state.user.isAuthorized) appears to be false but the isAuthorized within the store.state.user is true. I feel like these should be the same thing? — Paco

Hiws Hiws · Accepted Answer · 2021-01-25T04:09:42

This is happening because when you expand an object in the console, it will evaluate the object and its values based on the time of expanding, and not based on the time of logging it. It should tell you when the value was evaluated, if you hover the small blue square with an ! in it.

Meaning that, when you log the object. isAuthorized is indeed false, as you can see when you log the property directly, but when you go and expand the object in the console it's true. Because at some point after logging it, some part of your program has changed ´isAuthorized´ to true.

The display also varies a little whether your console is open at the time of logging the value of not. The below screenshots are based on the snippet at the end of this post, so you can try it yourself.

The first image is how it looks if the console is closed at the time of logging. Here it simply shows Object, and when you expand it, it shows state is true.

In the second picture, the console was open when logging, and here it shows state: false, and when you expand it, it shows state: true, because it's fetching the current state of the object.

const object = {
  state: false
}

console.log('State:', object.state)
console.log('Object:', object)

object.state = true

Open up your browsers console to see the output.

Vue router Auth-guard function doesn't check Vuex store state

1 Answers