定义 Vue-Router 路由时访问 Vuex 状态 [英] Accessing Vuex state when defining Vue-Router routes

问题描述

我有以下 Vuex 商店(main.js):

I have the following Vuex store (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) 定义了以下路由:

I also have the following routes defined for 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, 是让路由器将用户重定向到登录页面.

I'm trying to make it so that, if Vuex stores the user object, and it has the authenticated property set to false, is has the router redirect the user to the login page.

我有这个:

Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresLogin) && ???) {
        // set Vuex state's globalError, then redirect
        next("/Login")
    } else {
        next()
    }
})

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

The problem is I don't know how to access the Vuex store's user object from inside the beforeEach function.

我知道我可以使用 BeforeRouteEnter 在组件内部设置路由器保护逻辑，但这会使每个组件变得混乱.我想在路由器级别集中定义它.

I know that I can have the router guard logic inside components using BeforeRouteEnter, but that would clutter up each component. I want to define it centrally at the router level instead.

推荐答案

正如所建议的 在这里，您可以做的是从商店所在的文件中导出您的商店，并将其导入routes.js.它将类似于以下内容:

As suggested here, what you can do is to export your store from the file it is in and import it in the routes.js. It will be something like following:

你有一个 store.js:

import Vuex from 'vuex'

//init store
const store = new Vuex.Store({
    state: {
        globalError: '',
        user: {
            authenticated: false
        }
     },
     mutations: {
         setGlobalError (state, error) {
             state.globalError = error
         }
     }
})

export default store

现在在 routes.js 中，您可以:

Now in routes.js, you can have:

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from ./store.js

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 }
]

Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresLogin) && ???) {
        // You can use store variable here to access globalError or commit mutation 
        next("/Login")
    } else {
        next()
    }
})

在ma​​in.js中也可以导入store:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import store from './store.js'

//init app
const app = new Vue({
    router: Router,
    store,
    template: '<app></app>',
    components: { App }
}).$mount('#app')

这篇关于定义 Vue-Router 路由时访问 Vuex 状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！