reactjs - firebase 身份验证在刷新时延迟

Question

我的 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 会出现轻微延迟。它首先为 null，然后向 firebase 服务器执行 POST 以确定身份验证状态。当它返回时，currentUser 对象被填充。但这种延迟会导致问题。

我的黑客解决方案如下:更新:这实际上不起作用......

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

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

更新2:

我做这件事的时候已经是深夜了。显然 setTimeout 实际上也不起作用。

Answer 1

好的。因此，我能够通过利用 firebase 提供的 localStorage 变量来存储用户信息来解决这个问题。

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