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 的值时，无论您的控制台是否打开，显示也会略有不同。下面的截图是根据post末尾的片段截取的，所以你可以自己试试。

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

第二张图，logging的时候console是打开的，这里显示state: false，展开后显示state: true，因为是fetch对象的当前状态.

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.

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

Vue router Auth-guard function doesn't check Vuex store state

javascript

vue.js

vuex