Vue-router: Question: Accessing root's $data in beforeEach hook

[diemah77]

I'd like to check/use some data from the root (App) component in a beforeEach hook, something like the logged-in user or the state of authentication. I've come up with this:

this.router.app.user

Is this the right way to do?

[yyx990803]

router.beforeEach(function () {
  // router.app.user
})

[andershagbard]

router.app.user doesn't seem to work anymore. Anyone have a workaround?

[bobmoff]

i have the same problem. i am not sure what is going on. if i log router.app and inspect in chrome i can click and unfold the user object, but if i try to access it in the code it is undefined ?

edit: ah, i guess as it is not yet loaded, but when the inspector has access to the reference it has been populated. that is, when refreshing the browser.. my root app wasnt loaded and therefor the user object wasnt populated yet. so i wonder if there is any way to wait until the app data is populated hmm

[sstenn]

i have the same problem. i am not sure what is going on. if i log router.app and inspect in chrome i can click and unfold the user object, but if i try to access it in the code it is undefined ?

edit: ah, i guess as it is not yet loaded, but when the inspector has access to the reference it has been populated. that is, when refreshing the browser.. my root app wasnt loaded and therefor the user object wasnt populated yet. so i wonder if there is any way to wait until the app data is populated hmm

Anything on this??

[aDotInTheVoid]

From here

router.beforeEach(async (to, from, next) => {
    await Vue.nextTick()
    console.log(router.app.loggedInUser);
  if (to.path != '/login' && !router.app.loggedInUser) {
    next('/login');
    return;
  }
  next();
})