Vue 路由器 Auth-guard 功能不检查 Vuex 存储状态

Posted 2023-02-22

【中文标题】Vue 路由器 Auth-guard 功能不检查 Vuex 存储状态

【英文标题】：Vue router Auth-guard function doesn't check Vuex store state

【发布时间】：2021-04-28 21:32:49

【问题描述】：

我正在尝试为个人资料页面设置 auth-guard。我将 Vue (2.0) 与 vue-router 和 Vuex 一起用于状态。我的后端是firebase，但我认为这在这里不重要吗？我的 auth-guard 函数似乎无法正确获取 requiresAuth 状态。

这是我的 auth-guard 功能：

  
path: "/profile",
name: "Profile",
component: Profile,
meta: 
  requiresAuth: true




];

const router = new VueRouter(
  mode: "history",
  base: process.env.BASE_URL,
  routes
);

router.beforeEach((to, from, next) =>   
  console.log('-----------ROUTE GUARD PROPS--------');
  console.log(store.state.user.isAuthorized);
  console.log(store.state.user);
  console.log('----------- END ROUTE GUARD PROPS--------');
  if (to.matched.some(record => record.meta.requiresAuth)) 
    if (store.state.user.isAuthorized) 
      next()
     else 
      next("/Login")
    
   else 
      next()
  
)

而换页时浏览器控制台的结果如下：

这里的问题需要明确的是，为什么console.log 与user 模块的state 打印输出中的isAuthorized 相矛盾。作为参考，我的商店有一个 user 和 shared 模块。 user 模块有一个 state 有两个成员：user 和 isAuthorized。因此浏览器输出。

任何想法为什么这两个冲突？

【问题讨论】：

所以你问为什么console.log(store.state.user.isAuthorized) 和console.log(store.state.user) 在控制台中显示两个不同的东西？

好吧，为什么console.log(store.state.user.isAuthorized) 看起来是false 但store.state.user 中的isAuthorized 是true。我觉得这些应该是一样的？

【参考方案1】：

发生这种情况是因为当您在控制台中展开对象时，它将根据展开时间而不是根据记录时间来评估对象及其值。如果您将带有! 的蓝色小方块悬停在其中，它应该会告诉您何时评估该值。

意思是，当你记录对象时。 isAuthorized 确实是false，当您直接记录属性时可以看到，但是当您在控制台中展开对象时，它是true。因为在登录后的某个时间点，您的程序的某些部分已将“isAuthorized”更改为true。

在记录 not 的值时，无论您的控制台是否打开，显示也会略有不同。 下面的截图是根据文末的sn-p截图的，大家可以自己试试。

第一张图片是在记录时控制台关闭时的外观。这里简单显示Object，展开后显示state就是true。

在第二张图中，控制台在登录时是打开的，这里显示state: false，当你展开它时，它显示state: true，因为它正在获取对象的当前状态。

const object = 
  state: false


console.log('State:', object.state)
console.log('Object:', object)

object.state = true

Open up your browsers console to see the output.

【讨论】：

我很欣赏这个答案 - 特别是因为我不知道提升方面（我是新来的）。这确实是问题的答案，尽管我真的不明白为什么state 可能是错误的。但是，这似乎与我提出的问题不同。

@Paco 我的猜测是，任何对用户进行身份验证的代码都会在输入相关路线后运行。祝你好运:)