如何在Vue-Router守卫执行前读取解析Cookie并存储到Vuex？

这个问题其实是Vue生命周期和路由守卫执行顺序的典型坑——路由守卫的触发时机确实早于App组件的created钩子。因为Vue在挂载App之前，会先完成路由的匹配和守卫校验，所以你在App的created里初始化用户状态，自然赶不上路由守卫的权限校验。

下面给出几种符合Vue风格的解决方案，按优雅程度和实用性排序：

方案1：用全局路由守卫beforeEach做一次性初始化（推荐） #

把用户初始化逻辑移到全局的beforeEach守卫里，但要确保只执行一次，避免每次路由跳转都重复读取Cookie。这样既保证了路由守卫执行前状态已就绪，又不会产生冗余操作。

首先修改你的loginFromCookie action，让它返回一个Promise（即使逻辑是同步的，封装成Promise也能更好地配合异步守卫）：

// store/modules/auth.js
const actions = {
  loginFromCookie ({ commit }) {
    return new Promise(resolve => {
      if (window.$cookies.isKey('jwt_payload')) {
        console.log('loginFromCookie()')
        const jwtDecode = require('jwt-decode')
        const jwtPayload = window.$cookies.get('jwt_payload')
        const decoded = jwtDecode(jwtPayload)
        const user = decoded.sub
        user.isAnon = false
        commit('setUser', user)
      }
      resolve()
    })
  },
}

然后在路由配置里添加全局守卫，控制初始化只执行一次：

// routes/index.js
import store from '../store'

// 标记是否已完成用户初始化
let hasInitializedUser = false

const router = new Router({
  // 你的路由配置...
})

router.beforeEach(async (to, from, next) => {
  // 只在第一次进入应用时初始化用户
  if (!hasInitializedUser) {
    await store.dispatch('auth/loginFromCookie')
    hasInitializedUser = true
  }

  // 这里处理你的权限校验逻辑
  if (to.name === 'login') {
    guardAgainstNotAnon(to, from, next)
  } else {
    next()
  }
})

export default router

这样修改后，无论用户访问哪个深层链接，都会先完成用户状态初始化，再执行后续的路由守卫和组件渲染，完美解决顺序问题。

方案2：在main.js中提前初始化用户状态 #

另一种思路是在挂载App之前就完成用户初始化，这样路由解析时状态已经完全就绪。修改main.js：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 先初始化用户，再挂载App
async function initApp() {
  await store.dispatch('auth/loginFromCookie')
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
}

initApp()

这种方式更直接，完全避开了路由守卫和组件生命周期的顺序问题，但缺点是会稍微延迟App的挂载（不过读取Cookie和解析JWT的耗时可以忽略不计）。

为什么原来的App created方案不行？ #

补充下原理：Vue的启动流程是这样的：

1. 初始化Vue实例，注入router和store
2. 触发路由的初始匹配，执行相关的beforeEnter和beforeRouteEnter守卫
3. 渲染App组件，执行其created钩子
   所以你的loginFromCookie确实会在路由守卫之后才执行，导致权限校验时用户还是匿名状态。

最后，你担心的“移到beforeEach不够优雅”其实可以通过一次性初始化来解决，这样既符合Vue路由守卫的设计意图，又不会产生冗余代码，是比较推荐的方案。

内容的提问来源于stack exchange，提问作者Wes