beforeEachの間にvuexモジュール状態をvue-routerに渡す

Question

私はvuexとvue-routerと一緒にVueJSを使用しています。私は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$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 
} 

LOGINアクションをトリガーするロジックに進み、突然変異が正しく実行されていることがわかります。coreモジュールのvuex状態を表示するとき、userとauthenticatedの状態が正しく変更されています。

QUESTION

それは単にルータが.beforeEachループ内で実行されている時間によってロードされていない、このモジュールのように思えます。これは本当ですか？

「はい」の場合は、このような状況を処理する方法について他に何か提案がありますか？ いいえ、私は間違って何をしていますか？

Answer 1

console.log(store.state.core.authenticated)まだログインしていないため、falseを返します。

コードでは、どこにでもユーザー情報を保持しません。例えば。 localStorageを使用して

同じ考察：

1. のlocalStorageをチェックし、あなたがあなたのLOGIN_SUCCESS突然変異、店舗のログイン情報で
2. をインポートしてbeforeEachフックでのlocalStorage
3. にトークンそのstoreを使用し、router.app.$storeを使用しないで、トークンを入力した場合は、ユーザー情報を取得して突然変異を適用します。ない場合は、ちょうどこのよう

何かのログインページを呼び出します。..

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