Vue：在路由保护（路由 beforeEach）中访问商店道具/变量？

Question

我正在努力在每个警卫之前检查路线中的商店变量/属性。我似乎无法弄清楚如何访问商店的属性。

我的代码：

import Vue from 'vue'
import Router from 'vue-router'
import store from "@/components/store.js"
... other imports..

Vue.use(Router);

const routes = [
    { path: '/', component: NluEditor },
    { path: '/nlueditor', component: NluEditor },
    { path: '/login', component: Login },
    { path: '/logout', component: Logout}
];

const router = new Router({
    routes
});

router.beforeEach((to, from, next) => {
    if(to.path != '/login') {
        console.log(store)
        if (store.state.loggedInUser) {  // cannot seem to access store ? 
            console.log("You are logged in :) Go to requested page ")
            next()
        }
        else {
            console.log("Not logged in.. redirecting....")
            next('login');
        }
    }
  })

const app = new Vue({
    el: '#app',
    router,
    store,

    render: h => h(App)
})

Answer 1

您可以访问商店。 导入时没有问题。

问题在于您如何访问state.loggedInUser 。 您可能在商店中使用模块，而loggedInUser可能属于某个模块。 所以要访问它，你需要像这样引用loggedInUser所属的模块名称：

if (store.state.moduleName.loggedInUser) {
  ? console.log("You are logged in :) Go to requested page ") 
    next() 
}

将moduleName替换为loggedInUser所属模块的名称。

Answer 2

我能够在最近的应用程序中通过将store.state.loggedInUser更改为store.getters.loggedInUser来实现这store.getters.loggedInUser 。

本质上告诉它直接调用 getter 方法，而不是通过状态映射到该方法。