Przekazywanie stanu modułu vuex do vue-routera podczas poprzedniej opcji.

Question

Używam VueJS w połączeniu z vuex i vue-router. Mam moduł vuex, który dokonuje mutacji w swoim sklepie i próbuje użyć tego do ustalenia, czy użytkownik jest uwierzytelniany.

Oto, jak wygląda mój kod w odpowiedniej części.

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 
} 

Kiedy Przechodzę przez moją logikę, aby wywołać akcję LOGIN, widzę, że mutacja została wykonana poprawnie, a kiedy używam rozszerzenia Chrome do przeglądania stanu vuex dla mojego modułu core, stan dla user i authenticated został odpowiednio zmutowany.

PYTANIE

Wydaje się, że ten moduł po prostu nie został załadowany przez czas router jest uruchomiony w pętli .beforeEach. Czy to prawda?

Jeśli tak, jakie są inne sugestie dotyczące radzenia sobie z tą sytuacją? Jeśli nie, co robię nieprawidłowo?

Answer 1

console.log(store.state.core.authenticated) return false, ponieważ nie logujesz się jeszcze.

W swoim kodzie nie przechowujesz informacji o użytkowniku w dowolnym miejscu. Na przykład. stosując localStorage

same rozważania:

1. Nie używaj router.app.$store użyć store że importowania
2. W swojej LOGIN_SUCCESS mutacji, o sklep logowania i Token do localStorage
3. W swoim hakiem beforeEach sprawdzić localStorage, jeśli został zapełniony tokenem, uzyskaj informacje o użytkowniku i zastosuj mutację. Jeśli nie, po prostu zadzwoń do strony logowania

Coś takiego ..

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