在定义Vue-Router路由时访问Vuex状态

10 浏览
0 Comments

在定义Vue-Router路由时访问Vuex状态

我有以下的Vuex store(main.js)：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//初始化store
const store = new Vuex.Store({
    state: {
        globalError: '',
        user: {
            authenticated: false
        }
     },
     mutations: {
         setGlobalError (state, error) {
             state.globalError = error
         }
     }
})
//初始化app
const app = new Vue({
    router: Router,
    store,
    template: '',
    components: { App }
}).$mount('#app')

我还有以下为Vue Router定义的路由(routes.js)：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//定义路由
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) && ???) {
        //设置Vuex state的globalError，然后重定向
        next("/Login")
    } else {
        next()
    }
})

问题是我不知道如何从beforeEach函数内部访问Vuex store的user对象。

我知道我可以在组件内部使用BeforeRouteEnter来实现路由守卫逻辑，但是那样会使每个组件都变得混乱。我希望在路由器级别上集中定义它。

0