Vue：访问路由保护中的存储道具/变量（路由 beforeEach）？答案

【问题标题】：Vue : Accessing store prop/variable in route guard (route beforeEach)?Vue：访问路由保护中的存储道具/变量（路由 beforeEach）？
【发布时间】：2018-03-02 00:28:11
【问题描述】：

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

我的代码：

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

【问题讨论】：

你能分享你的store.js代码吗

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

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

问题在于您访问state.loggedInUser 的方式。您可能正在商店中使用模块，而loggedInUser 可能属于一个模块。因此，要访问它，您需要像这样引用loggedInUser 所属的模块名称：

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

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

【讨论】：

其实你是对的！...我完全忽略了用户处理的逻辑在不同的模块中..谢谢！ :)
我这几天一直在寻找这个答案...非常感谢！！！！！！

【解决方案2】：

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

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

【讨论】：

明天早上试试这个挪威维京时间:) 谢谢！