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

Question

I'm struggling to do a check against a store variable/property in the route beforeEach guard.. I cannot seem to figure out how to access the store's properties..

My code :

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

You can access the store. There is no problem with that as you are importing it.

The problem is with how you are accessing state.loggedInUser . You might be using modules in your store and loggedInUser might belong to a module. So to access it you need to refer to the module name that loggedInUser belongs to like this:

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

Replace moduleName with the name of the module loggedInUser belongs to.

Answer 2

I was able to achieve this in a recent app by changing store.state.loggedInUser for store.getters.loggedInUser .

Essentially telling it to call the getter method directly instead of a mapping to the method through the state.