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.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 我的猜测是,任何对用户进行身份验证的代码都会在输入相关路线后运行。祝你好运:)以上是关于Vue 路由器 Auth-guard 功能不检查 Vuex 存储状态的主要内容,如果未能解决你的问题,请参考以下文章
Vue.js 路由在身份验证检查后重定向之前短暂显示 404 错误消息