When the vue app is being created, it will dispatch an action from the store that hits the backend endpoint to fetch the user data and update the user state.

I wanted to use navigation guards (either beforeEnter inside the relevant route or beforeRouteEnter inside the component) so it will check if the user data has the right permissions to route to the component. However, when I try to access either store.state or store.getters, it returns the empty data because the router is loaded before the action in the store is completed yet.

I tried different solutions I found online but not much luck yet..The following is a snippet of the code.

export default {
  name: 'App',
  created() {
    this.setupAxios()
    this.fetchInitial()
  },
  methods: {
    setupAxios(){
      axios.defaults.headers.common['X-CSRFToken'] = window.csrfToken
    },
    fetchInitial(){
      this.$store.dispatch('FETCH_USER_PROFILE')
    },
  }
}

const actions = {
  ['FETCH_USER_PROFILE']: ({commit, dispatch}) => {
    return axios.get(reverseJS['api2:users-list']())
      .then(resp => {
        commit('FETCH_USER_PROFILE', resp.data)
        return resp.data
      })
      .catch(error => {
        commit('USERS_ERROR', error)
        throw error
      })
  },
}