Передача состояния модуля vuex в Vue-маршрутизатор во время beforeEach

Я использую VueJS в сочетании с vuex и vue-router. У меня есть vuex модуль, который делает мутацию в своем хранилище и пытается использовать это, чтобы определить, аутентифицируется ли пользователь.

вот как выглядит мой код в соответствующей части.

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 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

/магазин/модули/ядро.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
}

Когда Я пройдите через мою логику, чтобы вызвать LOGIN действие, я вижу, что мутация выполнена правильно, и когда я использую расширение Chrome для просмотра состояния vuex для моего core модуль, состояние user и authenticated были надлежащим образом мутировали.

вопрос

похоже, что этот модуль просто не был загружен к тому времени, когда маршрутизатор работает в .beforeEach петли. Это правда?

если да, то каковы некоторые другие предложения по как справиться с этой ситуацией? Если нет, то что я делаю неправильно?

1 ответов


console.log(store.state.core.authenticated) верните false, потому что вы еще не сделали логин.

в вашем коде вы не сохраняете информацию о пользователе в любом месте. Е. Г. через объект localStorage

те же соображения:

  1. не использовать router.app.$store используйте store импортировать
  2. в своем LOGIN_SUCCESS мутация, хранить данные для входа и токен в localstorage
  3. в своем beforeEach hook, проверьте localstorage, если он был заполнен токеном, получите информацию о пользователе и примените мутацию. Если нет, просто позвоните на страницу входа

что-то вроде этого..

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