Accessing to store in the router

Question

I would like to check in my Vuex store whether a user has the 'admin' role before entering the /dashboard route. But I can't properly access data from store.getters.

I use Quasar (Vue.js) and Vuex + Typescript.

In the routes.ts file, on the beforeEnter() function, I can access getters from the store with a console.log(store.myStore.getters). Here I see userInfos inside:

I don't understand why I only get {} and not {...} (Note that if I click on it, I see its contents).

But if I call console.log(store.myStore.getters.userInfos), I don't see the data:

Here is index.ts (router):

import { route } from 'quasar/wrappers'
import VueRouter from 'vue-router'
import { Store } from 'vuex'
import { StateInterface } from '../store'
import routes from './routes'

export default route<Store<StateInterface>>(function ({ Vue }) {
  Vue.use(VueRouter)

  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,

    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  return Router
})

Here is routes.ts (router):

import { RouteConfig } from 'vue-router'

const routes: RouteConfig[] = [
  {
    path: '/',
    component: () => import('layouts/Login.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: '/inscription', component: () => import('pages/SignUp.vue') },
      { path: '/connexion', component: () => import('pages/SignInPage.vue') }
    ]
  },

  {
    path: '/main',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: '/dashboard', component: () => import('pages/DashboardB2B.vue'),
          beforeEnter: (to, from, next) => {
            const store = require('../store')
            console.log("before enter")
            console.log(store.myStore.getters)
            return next();
        }, },
      {
        path: '/ajouter-un-referentiel',
        component: () => import('pages/ReferentielMetier.vue')
      },
      {
        path: '/init',
        component: () => import('components/bot/BotSkeleton.vue')
      }
    ]
  },
  {
    path: '/bot',
    component: () => import('layouts/Bot.vue'),
    children: [
      {
        path: '/ajouter-un-referentiel',
        component: () => import('pages/ReferentielMetier.vue')
      },
      {
        path: '/init',
        component: () => import('components/bot/BotSkeleton.vue')
      }
    ]
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

And here is index.ts with the store (Vuex):

import Vue from 'vue'
import { store } from 'quasar/wrappers'
import Vuex from 'vuex'
Vue.use(Vuex)

import matching from './modules/matching'
import orga from './modules/organigrame'
import user from './modules/user'

export interface StateInterface {
  example: unknown
}

let myStore: any

export default store(function({ Vue }) {
  Vue.use(Vuex)

  const Store = new Vuex.Store<StateInterface>({
    modules: {
      matching,
      orga,
      user
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: !!process.env.DEBUGGING
  })

  myStore = Store

  return Store
})

export {myStore}

EDIT: Looks like my console.log runs before the getters are loaded, because when I check out Vue developer tools, I see everything. How can I check the store if the store itself doesn't load before the beforeEnter function?

I guess async/await might help you here. try async/await or promise whenever you're trying to get store data in before router. — Nik.Developer, Dec 04 '20 at 14:00
Hi @Nik.Developer, do you have any idea of where I have to put this async/await ? Tried Async beforeEnter() and await console.log(store.myStore.getters.userInfos) and it is the same — Jer, Dec 04 '20 at 14:30

score 2 · Answer 1 · edited Jun 21 '21 at 08:52

2

please try like this

store.myStore.getters["userInfos"]

edited Jun 21 '21 at 08:52

Slava Rozhnev

9,510
6
23
39

answered Jun 21 '21 at 06:19

nihad

21
2

score 0 · Answer 2 · answered Sep 19 '22 at 16:45

0

I'm having exact issue, even if i use async/await :S

answered Sep 19 '22 at 16:45

dcruz1990

1
2

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/32755139) – Vojin Purić Sep 23 '22 at 20:35

score -1 · Answer 3 · answered Dec 04 '20 at 15:00

-1

try this

router.beforeEach(async(to, from, next) => {
    const userInfo = await store.getters.userInfos;
    console.log(userInfo);
});

answered Dec 04 '20 at 15:00

Nik.Developer

131
9

i had to put that on index.ts (router), with Router.beforeEach cause i had Route and not Router in the routes.ts file. I also have this same issue ... so Weird – Jer Dec 04 '20 at 16:16
2

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel Dec 04 '20 at 20:04

Accessing to store in the router

3 Answers3