用户信息来自异步函数时如何正确实现Vue.js路由守卫？

你的当前实现思路逻辑上可以解决异步加载用户信息的时序问题，能在本地测试时跑通，但存在两个明显的生产环境隐患，不建议直接上线使用：

• 路由守卫注册时机晚于路由实例初始化：从应用加载完成到userService.initUserData执行完成的这段时间内，如果用户手动输入地址触发路由跳转，此时守卫还未注册，会直接绕过权限校验进入目标页面，出现权限漏洞。
• 权限状态为静态缓存值：isAuthenticated和userRole是用户信息初始化完成那一刻读取的固定值，后续用户登录状态失效、角色变更时，守卫无法拿到最新值，权限判断会出错。

更优实现方案 #

推荐将异步初始化逻辑收敛到路由守卫内部，配合Vuex状态标记避免重复初始化，所有路由跳转都会经过完整的校验逻辑，不存在时序漏洞：

1. 先在Vuex中新增用户初始化状态标记，避免重复执行初始化请求
2. 在路由守卫中先判断初始化状态，未初始化则先等待用户信息加载完成，再执行权限校验
3. 每次权限校验都从Vuex getters读取最新的登录状态和角色，保证判断逻辑实时生效

优化后代码示例 #

Vuex状态调整

// store/index.js
const state = {
  userInfo: null,
  userInited: false // 标记用户信息是否已完成初始化
}
const mutations = {
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo
    state.userInited = true
  }
}
const getters = {
  getIsAuthenticated: state => !!state.userInfo,
  getUserRole: state => state.userInfo?.role || '',
  getUserInited: state => state.userInited
}

路由守卫代码

// router/index.js 直接注册守卫，无需包裹异步自执行函数
router.beforeEach(async (to, from, next) => {
  // 未初始化用户信息时先执行初始化
  if (!store.getters.getUserInited) {
    try {
      // 可在此处添加全局loading，避免初始化过程中页面空白
      await userService.initUserData()
    } catch (err) {
      // 初始化失败（如token过期、鉴权失败）直接跳转登录页
      next({ name: 'LoginPage' })
      return
    }
  }

  const isAuthenticated = store.getters.getIsAuthenticated
  const userRole = store.getters.getUserRole

  // 未登录且访问非登录页，直接跳转登录
  if (to.name !== 'LoginPage' && !isAuthenticated) {
    next({ name: 'LoginPage' })
    return
  }

  // 角色权限校验
  if (to.meta.customerAuth) {
    if (userRole === 'Customer') {
      next()
    } else if (userRole === 'Admin') {
      next({ name: 'AdminView' })
    } else {
      next({ name: 'LoginPage' })
    }
  } else if (to.meta.adminAuth) {
    if (userRole === 'Admin') {
      next()
    } else if (userRole === 'Customer') {
      next({ name: 'CustomerView' })
    } else {
      next({ name: 'LoginPage' })
    }
  } else {
    // 无权限要求的页面直接放行
    next()
  }
})

该方案的优势：

• 所有路由跳转都会经过完整的权限校验，不存在时序漏洞
• 初始化逻辑仅会执行一次，后续跳转不会重复发起请求
• 每次校验都读取最新的用户状态，用户登出、角色变更时也能正确判断权限
• 完善了异常捕获逻辑，初始化失败时可直接处理

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