I have the following Vuex store (main.js):

import Vue from 'vue'

import Vuex from 'vuex'



Vue.use(Vuex)



//init store

const store = new Vuex.Store({

    state: {

        globalError: '',

        user: {

            authenticated: false

        }

     },

     mutations: {

         setGlobalError (state, error) {

             state.globalError = error

         }

     }

})



//init app

const app = new Vue({

    router: Router,

    store,

    template: '<app></app>',

    components: { App }

}).$mount('#app')

I also have the following routes defined for Vue Router (routes.js):

import Vue from 'vue'

import VueRouter from 'vue-router'



Vue.use(VueRouter)



//define routes

const routes = [

    { path: '/home', name: 'Home', component: Home },

    { path: '/login', name: 'Login', component: Login },

    { path: '/secret', name: 'Secret', component: SecretPage, meta: { requiresLogin: true }

]

I'm trying to make it so that, if Vuex stores the user object, and it has the authenticated property set to false, is has the router redirect the user to the login page.

I have this:

Router.beforeEach((to, from, next) => {

    if (to.matched.some(record => record.meta.requiresLogin) && ???) {

        // set Vuex state's globalError, then redirect

        next("/Login")

    } else {

        next()

    }

})

The problem is I don't know how to access the Vuex store's user object from inside the beforeEach function.

I know that I can have the router guard logic inside components using BeforeRouteEnter, but that would clutter up each component. I want to define it centrally at the router level instead.