[英]Passing vuex module state into vue-router during beforeEach
I am using VueJS in conjunction with vuex
and vue-router
. 我将VueJS与
vuex
和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. 我有一个
vuex
模块,它正在对其商店进行变异,并尝试使用它来确定用户是否经过身份验证。
Here is what my code looks like in relevant part. 这是我的代码在相关部分中的样子。
main.js 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 /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 /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. 当我通过我的逻辑触发
LOGIN
操作时,我可以看到突变正确执行,当我使用Chrome扩展来查看我的core
模块的vuex状态时, user
和经过authenticated
的状态已被正确改变。
QUESTION 题
It seems like this module just simply has not been loaded by the time the router is running in the .beforeEach
loop. 看起来这个模块只是在路由器在
.beforeEach
循环中运行.beforeEach
。 Is this true? 这是真的?
If yes, what are some other suggestions on how to handle this situation? 如果是,那么关于如何处理这种情况的其他一些建议是什么? If no, what am I doing incorrect?
如果不是,我做错了什么?
console.log(store.state.core.authenticated)
return false because you not make a login yet. console.log(store.state.core.authenticated)
返回false,因为您尚未登录。
In your code you not persist user info in anywhere. 在您的代码中,您不会在任何地方保留用户信息。 Eg using localstorage
例如,使用localstorage
Same considerations: 同样的考虑:
router.app.$store
, use store
that you import router.app.$store
,使用您导入的store
LOGIN_SUCCESS
mutation, store login info and token into localstorage LOGIN_SUCCESS
突变中,将登录信息和令牌存储到localstorage中 beforeEach
hook, check localstorage, if was populated with token, get user information and apply the mutation. beforeEach
挂钩中,检查localstorage,如果填充了令牌,获取用户信息并应用突变。 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()
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.