Передача состояния модуля 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
те же соображения:
- не использовать
router.app.$store
используйтеstore
импортировать - в своем
LOGIN_SUCCESS
мутация, хранить данные для входа и токен в localstorage - в своем
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()
}
}