How to access async store data in vue-router for usage in beforeEnter hook?

Question

How is it possible to access store data in beforeEnter which is retrieved asynchronously via the store action?

import store from './vuex/store';

store.dispatch('initApp'); // in here, async data will be fetched and assigned to the store's state

// following is an excerpt of the routes object:
{
  path: '/example',
  component: Example,
  beforeEnter: (to, from, next) =>
  {
    if (store.state.asyncData) {
      // the above state is not available here, since it
      // it is resolved asynchronously in the store action
    }
  }
}

This is especially important on the first page load or after a page reload, when the init data is being fetched and the router needs to wait for that data to either allow the user to access that page or not.

Is it possible for the router to "wait" for the data to be fetched? Or what's the best way to handle navigation guard in combination with async vuex store data?

(oh and pre-populating "asyncData" can't be the solution, since the beforeEnter hook needs to make its decision on real data from the database, not default data)

Answer 1

You can do it by returning a promise from vuex action, as it is explained here and call the dispatch from within the beforeEnter itself.

Code should look like following:

import store from './vuex/store';


// following is an excerpt of the routes object:
{
  path: '/example',
  component: Example,
  beforeEnter: (to, from, next) =>
  {
    store.dispatch('initApp').then(response => {
        // the above state is not available here, since it
        // it is resolved asynchronously in the store action
    }, error => {
        // handle error here
    })         
  }
}

Answer 2

Do you really need to fetch the data asynchronously from the server before every route change, or do you simply need to persist some data from the store so that they do not "disappear" when the page is reloaded or when user uses a direct link?

If the latter is the case, you can persist the auth data (e.g. JWT token) in localStorage/cookie and then simply pull them from the storage during initialization (and commit them to store) - this should be a synchronous action.

You can also persist the whole state of the store by using vuex-persistedstate so that it doesn't disappear on reload and doesn't need to be hydrated.

If you need to fetch some data asynchronously once before first load or page reload, you can dispatch a store action and initialize the Vue instance in the then() callback - but this might depend on your implementation. Something like this (in main.js):

import Vue from 'vue';
import VueRouter from 'vue-router';
import { sync } from 'vuex-router-sync';

// contains VueRouter instance and route definitions
import router from 'src/router/router';
// contains Vuex.Store instance. I guess this is './vuex/store' in your example?
import store from 'src/store/store';

// sync the router with vuex store using vuex-router-sync
Vue.use(VueRouter);
sync(store, router);

// dispatch init action, doing asynchronous stuff, commiting to store
store.dispatch('initApp').then(() => {
    // create the main Vue instance and mount it
    new Vue({
        router,
        store           
    }).$mount('#app');
});

Answer 3

I've solved this issue by using store.watch() for no initial value and return the latest value when already initialized.

Here is my sample code

async function redirectIfNotAuth (to, from, next) {
  const user = await getUserState()
  if (user === null) {
    next({ name: 'auth' })
  } else {
    next()
  }
}

function getUserState () {
  return new Promise((resolve, reject) => {
    if (store.state.user === undefined) {
      const unwatch = store.watch(
        () => store.state.user,
        (value) => {
          unwatch()
          resolve(value)
        }
      )
    } else {
      resolve(store.state.user)
    }
  })
}


/* STORE */
const store = new Vuex.Store({
  state: {
    user: undefined
  }
})

/* ROUTER */
new Router({
  routes: [
    {
      path: '',
      name: 'home',
      component: Home,
      beforeEnter: redirectIfNotAuth
    },
    {
      path: '/signin',
      name: 'auth',
      component: Auth,
    }
  ]
})

Answer 4

This is my solution:

First, define async function to load remote data

import {Common_Config} from "@/app/config/Common";

export class Life_Boot {

    public static async prepareRemoteLoading(params : any = {}) {
        return new Promise(async (resolve, reject) => {
            let res = await this.initialize(params)
            resolve(res)
        })
    }

    protected static async initialize(params : any = {}) {
        const client = Common_Config.init(params)
        // load remote config, get user roles and menus, add routes dynamically
        await client.context('life').waitInitialized()
        return client
    }

}

Second, create Vue instance within then() function

// at the bottom of the main.js
Life_Boot.prepareRemoteLoading().then(client => {

  new Vue({
    router,
    store,
    i18n,
    render: h => h(App),
  }).$mount('#app')

})