Accessing Vuex state when defining Vue-Router routes

Question

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.

Answer 1

As suggested here, what you can do is to export your store from the file it is in and import it in the routes.js. It will be something like following:

You have one store.js:

import Vuex from 'vuex'  //init store const store = new Vuex.Store({     state: {         globalError: '',         user: {             authenticated: false         }      },      mutations: {          setGlobalError (state, error) {              state.globalError = error          }      } })  export default store 

Now in routes.js, you can have:

import Vue from 'vue' import VueRouter from 'vue-router' import store from ./store.js  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 } ]  Router.beforeEach((to, from, next) => {     if (to.matched.some(record => record.meta.requiresLogin) && ???) {         // You can use store variable here to access globalError or commit mutation          next("/Login")     } else {         next()     } }) 

In main.js also you can import store:

import Vue from 'vue' import Vuex from 'vuex'  Vue.use(Vuex)  import store from './store.js'  //init app const app = new Vue({     router: Router,     store,     template: '<app></app>',     components: { App } }).$mount('#app')