Vue路由角色为user时未正常跳转登录页问题排查

问题根因排查 #

你代码的核心问题出在路由守卫的判断逻辑错误，其次存在异步请求时序问题和冗余代码问题，按以下步骤修复即可： #

1. 修正逻辑判断错误 #

你当前的判断条件：

if (!store.getters["auth/authenticated"] && obj.includes("user"))

该条件的生效逻辑是**同时满足「用户未登录」和「用户角色为user」**才会触发跳转。但如果用户已经登录（authenticated为true），!authenticated就为false，整个条件直接不成立，已登录的user角色用户自然不会被拦截跳转。
如果你的需求是「未登录的用户、已登录但角色为user的用户，都要跳转登录页」，把&&改成||即可：

if (!store.getters["auth/authenticated"] || obj.includes("user"))

如果你的需求是「仅已登录的user角色用户需要跳转，未登录用户正常放行」，就去掉!authenticated的判断：

if (store.getters["auth/authenticated"] && obj.includes("user"))

2. 修复Vuex异步请求时序问题 #

你在attempt action中调用接口拉取用户信息、设置角色是异步操作，路由守卫执行时大概率接口还未返回，state.roles还是初始值null，此时调用includes会直接报错，导致跳转逻辑失效。
可以通过以下两种方案解决：

• 方案一：应用初始化时先等待用户信息拉取完成再挂载路由

// 入口main.js
async function initApp() {
  const token = localStorage.getItem('token')
  if (token) {
    await store.dispatch('auth/attempt', token)
  }
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
}
initApp()

• 方案二：路由守卫中增加等待逻辑，判断角色已加载完成再执行校验

3. 移除冗余代码，增加边界判断 #

你对userRole的序列化、反序列化操作完全是多余的，可以直接使用getter返回的数组，同时增加空值判断避免报错。
修改后的路由守卫参考：

name: "GrantQuotes",
component: GrantQuotes,
beforeEnter: (to, from, next) => {
  const isAuthenticated = store.getters["auth/authenticated"]
  const userRoles = store.getters["auth/userRole"]
  // 角色未加载完成时可以先跳转加载页或直接放行，等加载完成后二次校验
  if (!userRoles) return next()
  if (!isAuthenticated || userRoles.includes("user")) {
    return next({ name: "Login" })
  }
  next()
},

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