Question

56

Passing vuex module state into vue-router during beforeEach

rated 0 times [ 60] [ 4] / answers: 1 / hits: 22446 / 8 Years ago, sun, october 9, 2016, 12:00:00

I am using VueJS in conjunction with vuex and vue-router. I have a vuex module that is making a mutation to its store, and trying to use that to determine whether or not a user is authenticated.

Here is what my code looks like in relevant part.

main.js

import Vue from 'vue'

import App from './App.vue'

import store from './store'

import router from './router'



router.beforeEach((to, from, next) => {

    console.log(router.app) // prints a Vue$2 object

    console.log(router.app.$store) // undefined

    console.log(store.getters.isAuthenticated) // false

    ...

}



const app = new Vue({

  store,

  router,

  ...App

})



app.$mount('#app')

/store/index.js

import Vue from 'vue'

import Vuex from 'vuex'

import core from './modules/core'



Vue.use(Vuex)



const store = new Vuex.Store({

  modules: {

    core: core

  }

})



export default store

/store/modules/core.js

import * as types from '../types'

import api from '../../api'

import router from '../../router'



const state = {

  token: null,

  user: null,

  authenticated: false

}



const mutations = {

  [types.LOGIN_SUCCESS] (state, payload) {

    console.log('mutate')

    state.token = payload.token

    state.user = payload.user

    state.authenticated = true

    router.go('/')

  }

}



const getters = {

  isAuthenticated: state => {

    return state.authenticated

  }

}



const actions = {

  [types.LOGIN] (context, payload) {

    api.getToken(payload).then(response => {

      context.commit(types.LOGIN_SUCCESS, response)

    })

  }

}



export default {

  state,

  mutations,

  actions,

  getters

}

When I go thru my logic to trigger the LOGIN action, I can see that the mutation executed properly, and when I use the Chrome extension to view the vuex state for my core module, the state for user and authenticated have been properly mutated.

QUESTION

It seems like this module just simply has not been loaded by the time the router is running in the .beforeEach loop. Is this true?

If yes, what are some other suggestions on how to handle this situation?
If no, what am I doing incorrect?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

margob

Add To Favorites

Follow

Total Points: 302

Total Questions: 89

Total Answers: 100

Location: Guadeloupe

Member since Sat, Jul 25, 2020

4 Years ago

answered 8 Years ago susanajamiep · Accepted Answer

console.log(store.state.core.authenticated) return false because you not make a login yet.

In your code you not persist user info in anywhere. E.g. using localstorage

Same considerations:

Not use router.app.$store, use store that you import

In your LOGIN_SUCCESS mutation, store login info and token into localstorage

In your beforeEach hook, check localstorage, if was populated with token, get user information and apply the mutation. If not, just call login page

Something like this..

const mutations = {

  [types.LOGIN_SUCCESS] (state, payload) {

    state.token = payload.token

    state.user = payload.user

    state.authenticated = true

    localstorage.setItem('token', payload.token)

    localstorage.setItem('user', payload.user)

  }

}



const actions = {

  [types.LOGIN] (context, payload) {

    return api.getToken(payload).then(response => {

      context.commit(types.LOGIN_SUCCESS, response)

      return response

    })

  }

}



router.beforeEach((to, from, next) => {

    let user = localstorage.getItem('user')

    let token = localstorage.getItem('token')

    if (user && token) {

      store.commit(types.LOGIN_SUCCESS, {token, user})

      next()

    }

    else if (!store.getters.isAuthenticated) {

      store.dispatch(types.LOGIN).then(() => next())

    } else {

      next()

    }

}