我的 SPA React/Firebase 应用程序的硬刷新不会在立即执行函数时保持身份验证状态。我有一个解决方法,但它是粗略的。
我的react路线利用该onEnter
功能来确定用户是否经过身份验证。例如
<Route path="/secure" component={Dashboard} onEnter={requireAuth}/>
此外,我的requireAuth
函数如下所示:
function (nextState, replace) {
console.log('requireAuth', firebase.auth().currentUser);
if (!firebase.auth().currentUser) {
console.log('attempting to access a secure route. please login first.');
replace({
pathname: '/login',
state: { nextPathname: nextState.location.pathname }
});
}
};
但是,在硬刷新时, 会有轻微的延迟firebase.auth().currentUser
。它首先为空,然后执行POST
到 firebase 服务器以确定身份验证状态。当它返回时,currentUser
对象被填充。但是,这种延迟会导致问题。
我的hacky解决方案如下:更新:这实际上不起作用......
function (nextState, replace) {
setTimeout(function () {
console.log('requireAuth', firebase.auth().currentUser);
if (!firebase.auth().currentUser) {
console.log('attempting to access a secure route. please login first.');
replace({
pathname: '/login',
state: { nextPathname: nextState.location.pathname }
});
}
}, 50);
};
只需将其包装在超时中即可。但是,我真的不喜欢这样……有什么想法吗?
更新:
我还尝试将它包装在一个onAuthStateChanged
侦听器中,这应该比setTimeout
具有明确时间延迟的 a更准确。代码如下:
function (nextState, replace) {
var unsubscribe = firebase.auth().onAuthStateChanged(function (user) {
if (!user) {
console.log('attempting to access a secure route');
replace({
pathname: '/login',
state: { nextPathname: nextState.location.pathname }
})
console.log('should have called replace');
}
unsubscribe();
});
// setTimeout(function () {
// console.log('requireAuth', firebase.auth().currentUser);
// if (!firebase.auth().currentUser) {
// console.log('attempting to access a secure route. please login first.');
// replace({
// pathname: '/login',
// state: { nextPathname: nextState.location.pathname }
// });
// }
// }, 50);
};
两条日志语句都执行了,但是react-routerreplace
好像没有正确执行。对于react-router专家来说,也许这是一个不同的问题。
更新2:
我做这件事的时候已经深夜了。显然setTimeout
实际上也不起作用。