Vue Router + Vuex：如何让 beforeEach 路由守卫等待 Vuex 状态改变？

Question

In my SPA, part of the initialization when the page loads is fetching the logged in user from the API, and then the user record is stored in the state alongside with initialized flag.

In the router beforeEach guard I need to check whether the user is logged in, but for it to function correctly, I need to wait until the initialized flag is set to true . How can I make my function wait for that? Should I hook into the store and create a watcher, or set up another variable as a promise or something?

Thanks!

Answer 1

You can implement a rudimentary "pause" feature on the router like this (code is untested):

// Router is initially not paused
let pausedResolve = null
let pausedPromise = Promise.resolve()

router.beforeEach(async (to, from, next) => {
  await pausedPromise
  next()
})

function pause() {
  if (!pausedResolve) {
    pausedPromise = new Promise(resolve => pausedResolve = resolve)
  }
}

function resume() {
  if (pausedResolve) {
    pausedResolve()
    pausedResolve = null
  }
}

After creating the router, immediately call pause() , then after logging in call resume() (you can do this in your Vuex code maybe).

The benefit of this implementation is that the router code is not dependent on the Vuex code (it's generally a good idea to keep code loosely-coupled whenever possible).