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

Posted

技术标签:

【中文标题】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.loguser 模块的state 打印输出中的isAuthorized 相矛盾。作为参考,我的商店有一个 usershared 模块。 user 模块有一个 state 有两个成员:userisAuthorized。因此浏览器输出。

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

【问题讨论】:

所以你问为什么console.log(store.state.user.isAuthorized)console.log(store.state.user) 在控制台中显示两个不同的东西? 好吧,为什么console.log(store.state.user.isAuthorized) 看起来是falsestore.state.user 中的isAuthorizedtrue。我觉得这些应该是一样的? 【参考方案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 我的猜测是,任何对用户进行身份验证的代码都会在输入相关路线后运行。祝你好运:)

以上是关于Vue 路由器 Auth-guard 功能不检查 Vuex 存储状态的主要内容,如果未能解决你的问题,请参考以下文章

typescript 秋田AUTH-guard.ts

vue路由发生了跳转,但页面没有跳转成功,怎么办呢?

初识vue 2.0:路由与组件

Vue.js 路由在身份验证检查后重定向之前短暂显示 404 错误消息

Laravel AJAX 请求进入路由 api Vue 错误

vue.jsangularJSreact.js框架比较