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

Question

我正在尝试为个人资料页面设置一个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。因此才会有浏览器输出。

你知道这两个为什么会冲突吗？

Answer 1

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

​

这意味着，当您记录对象时。当您直接记录该属性时，您可以看到isAuthorized确实是false，但是当您在控制台中展开该对象时，它是true。因为在记录之后的某一时刻，你的程序的某些部分已经将“isAuthorized”更改为true。

在记录not的值时，您的控制台是否处于打开状态，显示也会稍有不同。下面的截图是基于本文末尾的代码片段，所以你可以自己尝试一下。

第一个图像是控制台在日志记录时关闭时的外观。这里简单地显示了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.

​