我有以下Vuex商店(main.js):
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//init store
const store = new Vuex.Store({
state: {
globalError: '',
user: {
authenticated: false
}
},
mutations: {
setGlobalError (state, error) {
state.globalError = error
}
}
})
//init app
const app = new Vue({
router: Router,
store,
template: '<app></app>',
components: { App }
}).$mount('#app')
我还为Vue-Router(routes.js)定义了以下路由:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//define routes
const routes = [
{ path: '/home', name: 'Home', component: Home },
{ path: '/login', name: 'Login', component: Login },
{ path: '/secret', name: 'Secret', component: SecretPage, meta: { requiresLogin: true }
]
我试图这样做,以便如果Vuex商店的user
对象具有authenticated
属性false,则让路由器将用户重定向到“登录”页面。
我有这个:
Router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresLogin) && ???) {
// set Vuex state's globalError, then redirect
next("/Login")
} else {
next()
}
})
问题是我不知道如何user
从beforeEach函数内部访问Vuex存储的对象。
我知道我可以在组件内部使用路由器保护逻辑BeforeRouteEnter
,但这会使每个组件混乱。我想在路由器级别集中定义它。
这就是我想要的。
在App.vue中,我将对存储身份验证详细信息的cookie保持监视。(显然,在身份验证之后,我会将包含身份验证详细信息的令牌存储为cookie)
现在,只要此Cookie变空,我都会将用户路由到/ login页面。注销将删除cookie。现在,如果用户注销后回击,则由于cookie不存在(这要求用户登录),因此该用户将被路由到登录页面。