firebase auth在刷新时延迟

Question

我的SPA React/Firebase应用程序上的硬刷新在立即执行功能时不会保持身份验证状态.我有一个解决方法,但它是粗略的.

我的反应路由利用该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.它首先为null,然后执行a 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具有明确时间延迟的监听器更准确.代码如下:

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);
};

执行两个日志语句,但replace似乎没有正确执行react-router .也许这对于路由器专家来说是一个不同的问题.

更新2:

我在做这件事的时候是深夜.显然setTimeout实际上也没有用.

Answer 1

好的.因此,我能够通过利用localStoragefirebase提供的变量来存储用户信息来解决这个问题.

function (nextState, replace) {
    if (!firebase.auth().currentUser) {
        let hasLocalStorageUser = false;
        for (let key in localStorage) {
            if (key.startsWith("firebase:authUser:")) {
                hasLocalStorageUser = true;
            }
        }
        if (!hasLocalStorageUser) {
            console.log('Attempting to access a secure route. Please authenticate first.');
            replace({
                pathname: '/login',
                state: { nextPathname: nextState.location.pathname }
            });
        }
    }
};