105

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.

2
  • 2
    It seems that none of the answers follow best OOP practice re: composition and encapsulation: either depend on global "singletons", or patch everything in non-declarative place where routes are instantiated, rather defined. Does anyone know what is the Vue 3 solution in 2022?.. Jan 28, 2022 at 1:06
  • I ended up wrapping protected pages in a Vue component which dispatches an action on its mount. Most of routes are app routes, you can add a meta flag to the public routes so it'll skip the check for those. Many apps already have the App.vue, a perfect place for those checks & redirect if access token isn't there. Feb 10, 2022 at 2:32

9 Answers 9

114

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')
9
  • 1
    Thanks Saurabh, that's exactly what I ended up doing. I'll select your answer, as it's more extensive than mine. :)
    – Ege Ersoz
    Mar 5, 2017 at 3:32
  • 1
    Hi, I want to access store in components(Home, Login, Secret) in above example. How can I do this? My question: stackoverflow.com/questions/49959675/…
    – Sid
    Apr 21, 2018 at 20:04
  • 1
    How does this not create a new Store every time you import it?
    – nVitius
    Apr 25, 2019 at 19:02
  • 2
    @vintproykt that's true, 99.9% of the time. I've seen webpack create a duplicate instance once when it thought two relative import paths to the same module were unequal. Took ages to debug. I solved it with DI instead.
    – scipilot
    Sep 27, 2019 at 2:18
  • 3
    This is a poor solution to a dependency-injection problem. The router is now coupled to the store. What if the router is created in a framework and the store isn't created but in an application? Nov 11, 2019 at 18:26
21

You may use router.app to access the root Vue instance the router was injected into, then access store regularly via router.app.$store.

const router = new Router({
    routes,
})

router.beforeEach((to, from, next) => {
    // access store via `router.app.$store` here.
    if (router.app.$store.getters('user')) next();
    else next({ name: 'login' });
})

Here is the API Reference.

Vue 3

The router.app is removed in Vue 3, but you can still add it when using the router as explained in the migration guide:

app.use(router)
router.app = app
2
  • 7
    just a note of caution; in my project at least, $store is not injected on the first page render (first call to beforeEach). however, if you use beforeResolve then $store will be injected on the first render. May 14, 2021 at 18:42
  • 2
    For me still in first page render the store sometimes is undefined... Same for beforeEach and beforeResolve.. Any idea?
    – LastM4N
    Jul 22, 2022 at 13:23
9

I ended up moving the store out of main.js and into store/index.js, and importing it into the router.js file:

import store from './store'

//routes

const routes = [
    { path: '/home', name: 'Home', component: Home },
    { path: '/login', name: 'Login', component: Login },
    { path: '/secret', name: 'Secret', component: SecretPage, meta: { requiresLogin: true }
]    

//guard clause
Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresLogin) && store.state.user.authenticated == false) {
        store.commit("setGlobalError", "You need to log in before you can perform this action.")
        next("/Login")
    } else {
        next()
    }
})
3
  • 6
    This would cause a problem if you need to import the router into the store due to circular dependency issues. Feb 13, 2019 at 16:27
  • @DanielTwigg No, it wouldn't. Circular dependency resolution is resolved by webpack Aug 11, 2019 at 17:50
  • Anyway, it's a bad OOP composition "bad practice". Jan 27, 2022 at 20:51
9

Importing the store as @Saurabh suggested works. However IMHO it brings a certain workaround smell into your code.

It works, because the Vuex store is a singleton. Importing it it creates a hard linked dependency between your component, the routers and the store. At the very least it makes it harder to unit test. There is a reason why vue-router is decoupled and works like this and it may pay off to follow its suggested pattern and to keep the router decoupled from the actual store instance.

Looking at the source of vue-router it becomes apparent that there is a more elegant way to access the store from the router, e.g. in the beforeRouteEnter guard:

beforeRouteEnter: (to, from, next) => {
  next(vm => {
    // access any getter/action here via vm.$store
    // avoid importing the store singleton and thus creating hard dependencies
  })
}

Edit on 10. Sept 2020 (thanks @Andi for pointing that out)

Using the beforeRouteEnter guard is then up to the concrete case. Off the bat I see the following options:

  1. Declare the guard in a mixin and selectively use it in the components that need it, instead of filtering needed components in a global guard
  2. Declare the guard in a global mixin (beware of declaration peculiarities, e.g. needs to be declared after Vue.use(VueRouter);: here and here)
5
  • but this is an In-Component Guard, so you cannot define it globally for all routes
    – Andi
    Sep 2, 2020 at 13:58
  • @andi sure. I'd be interested to see your perspective on how this could be a functional limitation for what the op is asking? Did I overlook something?
    – el.nicko
    Sep 7, 2020 at 13:35
  • @el.niko In his last paragraph he says that he knows about beforeRouteEnter but he wants to "define it centrally"
    – Andi
    Sep 10, 2020 at 7:12
  • 1
    @andi, thank you very much for pointing that out. AFAICS the OP didn't limit the solution to a static one, however your remark is valid. I appear to have laid out the ground work of the solution but came short on explaining my motivation and sln itself to the end. The beauty of the non-static approach is that it can be injected more flexibly and thus is better compatible to non-trivial applications (e.g. multiple store instances etc). I edited my answer.
    – el.nicko
    Sep 10, 2020 at 8:36
  • Are Vuex modules also singletones? In Elm, the magic of nested fractal sub-applications was assuming zero singletones anywhere in the well-organized microfrontend consuming microservices architecture. Jan 27, 2022 at 20:50
6

Managing your location state separate from the rest of your application state can make things like this harder than they maybe need to be. After dealing with similar problems in both Redux and Vuex, I started managing my location state inside my Vuex store, using a router module. You might want to think about using that approach.

In your specific case, you could watch for when the location changes within the Vuex store itself, and dispatch the appropriate "redirect" action, like this:

dispatch("router/push", {path: "/login"})

It's easier than you might think to manage the location state as a Vuex module. You can use mine as a starting point if you want to try it out:

https://github.com/geekytime/vuex-router

6

I found that the store was not available to me in router.js when using the guard router.beforeEach, however by changing the guard to router.beforeResolve, then the store was available.

I also found that by awaiting the import of the store in the guard router.beforeEach, I was then able to successfully use router.beforeEach. I provide an example of that below the router.beforeResolve code.

So to keep my example simular to the OP's question the following is how it would have worked for me. I am using vue-router 3.0.2 and vuex 3.1.0.

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store';  //or use a full path to ./store 

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 }
]

const router = new VueRouter({
   routes  //ES6
 })

router.beforeResolve((to, from, next) => {
    const user = store.state.user.user;  //store with namespaced  modules
    if (to.matched.some(record => record.meta.requiresLogin) && user.isLoggedIn) {
       next() //proceed to the route
    } else next("/login")  //redirect to login

})

export default router;

I also found that I could get router.beforeEach to work by await-ing the loading of the store in the beforeEach guard.

router.beforeEach(async (to, from, next) => {
  const store = await import('@/store');  //await the store 
  const user = store.state.user.user;  //store with namespaced modules
  if (to.matched.some(record => record.meta.requiresLogin) && user.isLoggedIn) {
  ....  //and continue as above
});
4
  • 1
    your method of awaiting the store is very nice. i used it to solve a problem like this and it works great!
    – devman
    Jul 8, 2020 at 17:28
  • 2
    Correct me if i'm wrong, but this would merely await a dynamic webpack import, not the store actually "loading" or the vue code that binds the store to the vue app object, correct? So this is kinda similar to doing something like setTimeout(1) to "await" a pass through the loop?
    – Caleb Jay
    Mar 17, 2021 at 7:45
  • @CalebJay Thanks for your observation Caleb. Do you have an idea why just even a simple await would change the beforeEach functionality to where it works as expected versus its default position as not working as expected? I'd love to get an insight as to why.
    – KenBuckley
    May 21, 2021 at 6:36
  • 2
    @KenBuckley - unproven guess here, but I believe the reason is that you're importing the store as variables instead of accessing the store attached to the Vue object, thus bypassing all the reactivity. I think the reason it works with the async is just coincidence that the race condition is resolved by then. Aug 10, 2022 at 2:00
1

in main.js you can do:

router.$store = store

and then in index.js under router:

await router.$store.dispatch("abcd")
0

This is how i would to it.

In App.vue, I will keep a watcher on cookie that stores authentication details. ( Obviously I would store a token containing authentication details as cookie after authentication )

Now whenever this cookie becomes empty, I will route the user to /login page. Logging out deletes the cookie. Now if user hit back after logging out, now since the cookie doesnot exist, ( which requires user to be logged in ), user will be routed to login page.

1
  • Interesting use of the watcher - I didn't know you could watch cookies. But the question requires it to only work from /some/ pages. Your watcher function would also need to check that metadata and not redirect if the user was on a public page.
    – scipilot
    Sep 27, 2019 at 2:21
-1

I found vuex-router-sync to be the easiest solution. From their site:

It adds a route module into the store, which contains the state representing the current route

1
  • 1
    Ambiguous response. Explain how you actually implemented to solve the question.
    – John Smith
    Jul 11, 2021 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.