Level 104
this.$store is not available in the router object. You can (in your router):
import store from '../path/to/store
then, using the store object
let authenticated = store.getters['auth/getAuthenticated'];
1 like
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I am trying to guard my routes by checking if the user is authenticated, this is the example route:
{
path: '/intranet',
component: search,
meta: { requiresAuth: true },
props: {
tax: 'type',
term: 'intranet-post',
name: 'Intranet'
}
},
And I am setting the guard like this:
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
let authenticated = this.$store.getters['auth/getAuthenticated'];
if (!authenticated) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})
This is the vuex module for auth:
import Vue from "vue";
export default {
namespaced: true,
state: {
authenticated: !!localStorage.getItem("token"),
token: localStorage.getItem("token")
},
mutations: {
login: function(state, token){
state.authenticated = true;
state.token = token;
},
logout: function(state){
state.authenticated = false;
state.token = '';
}
},
actions: {
login: function({commit}, token){
localStorage.setItem('token', token);
commit('login', token);
},
logout: function({commit}){
localStorage.removeItem("token");
commit('logout');
}
},
getters: {
getToken: (state) => state.token,
getAuthenticated: (state) => state.authenticated,
}
}
But, when I try to access the auth getter like it is shown in the route guard, I get an error:
Cannot read property 'getters' of undefined
What am I doing wrong, how can I fix this?
this.$store is not available in the router object. You can (in your router):
import store from '../path/to/store
then, using the store object
let authenticated = store.getters['auth/getAuthenticated'];
Please or to participate in this conversation.