在 beforeEnter 路由中访问 VuexStore

Posted 2023-03-07

【中文标题】在 beforeEnter 路由中访问 VuexStore

【英文标题】：Access the VuexStore in beforeEnter route

【发布时间】：2019-02-27 05:29:33

【问题描述】：

我想将未经身份验证的用户重定向到“/login”路由，并在他尝试访问登录页面时将身份验证用户重定向到“/”。

当用户登录时，我将他的信息放在商店中以便于检索。 当没有用户登录时，商店的用户认证信息仍然为空。

所以，在我的'/login'之前输入我想像这样重定向他：slight_smile：

beforeEnter: (to, from, next) => 
    if (store.getters.userAuthenticated != null) 
           next('/')
     else 
           next()
    

我的问题是 getter 中的 userAuthenticated 始终为空，即使我已登录。 当我放置一个 console.log(store.getters) 时，我会在我的 userAuthenticated getter 中看到实际信息。

beforeEnter 中的数据似乎与 store 中的实际数据不同步。

我会怎么做？

非常感谢！

【参考方案1】：

你就是这样做的

router.beforeEach((to, from, next) => 
  let nextParams
  let pageRequiresAuth    = to.matched.some(record => record.meta.requiresAuth)
  let userSignedIn        = store.getters['user/signedIn']

  if (pageRequiresAuth) 
    if (!userSignedIn) 
      nextParams =  path: paths.signInPath   
   else 
    if (userSignedIn)
      // don't let see auth pages after if user already signed in
      nextParams =  path: paths.afterSignInPath 
  
  next(nextParams)
)