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.