Vue : Accessing store prop/variable in route guard (route 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)
})

Can you share your store.js code please

Arun jai
– Arun jai

2018-03-02 04:49:19 +00:00
Commented Mar 2, 2018 at 4:49 — Arun jai
– Arun jai, Commented Mar 2, 2018 at 4:49

Vamsi Krishna · Accepted Answer · 2018-03-02 08:54:35Z

2

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.

answered Mar 2, 2018 at 8:54

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Terje Nygård Over a year ago

Actually you are right!... I completely ignored that the logic for userhandling was in a different module.. Thanks ! :)

Sabolis Over a year ago

I have been looking for this answer for days... thank you SO MUCH!!!!!!

Martin Calvert · Accepted Answer · 2018-03-02 00:42:10Z

0

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.

answered Mar 2, 2018 at 0:42

Martin Calvert

1,7152 gold badges12 silver badges13 bronze badges

1 Comment

Terje Nygård Over a year ago

Will try this tomorrow morning norwegian viking time :) thanks!

Collectives™ on Stack Overflow

Vue : Accessing store prop/variable in route guard (route beforeEach)?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related