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的{{1}}来在最近的应用中实现这一目标。

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

Vue：在路线保护中访问商店道具/变量（路线在每个之前）？

2 个答案: