Cuando se crea la aplicación vue, enviará una acción desde la tienda que llega al punto final del backend para obtener los datos del usuario y actualizar el estado del usuario.

Quería usar protectores de navegación (ya sea beforeEnter dentro de la ruta relevante o beforeRouteEnter dentro del componente) para verificar si los datos del usuario tienen los permisos correctos para enrutar al componente. Sin embargo, cuando trato de acceder a store.state o store.getters, devuelve los datos vacíos porque el enrutador se carga antes de que se complete la acción en la tienda.

Probé diferentes soluciones que encontré en línea, pero aún no tuve mucha suerte... El siguiente es un fragmento del código.

 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 }) }, }