Javascript 如何使用firebase+检查会话是否处于活动状态；反应

我已经在firebase中添加了一个授权，它可以完全正常工作。 可以登录到应用程序并进行导航，但当我使用

firebase.auth（）时，注销
onAuthChanged
可观察到的内容未更改/未触发

对于正确的登录/密码（400表示错误的组合）-会话已保存，并且我拥有以下用户凭据：

import React, {useContext, useEffect} from 'react';
import {ROUTES} from '../../../constants';
import {AuthUserContext} from "../../../session";
import history from '../../../helpers/history';
import {useLocation} from "react-router";
import app from "../../../api/firebase";

const WithAuthorization: React.FC = ({children}) => {
    const authUser = useContext(AuthUserContext);
    const isLogin = useLocation().pathname === ROUTES.LOGIN;
    const pushLogin = () => !isLogin && history.push(ROUTES.LOGIN);

    useEffect(() => {
        const listener = app.auth().onAuthStateChanged(
            (user: any) => {
                if(!user) {
                    pushLogin()
                } else {
                    console.log('Signed in with user');
                    console.log(user);
                }
            },
            (e: any) => {
                console.log(e);
            }, () => {
                console.log('completed');
            });
        return listener();
    }, [])

    return <>
        {authUser ? children : pushLogin()}
    </>;
}

export default WithAuthorization;

我是否缺少认证保护组件或可观察到的内容

---应用程序结构：

应用程序组件非常简单：


    import React, {useState} from 'react';
    import { Route, Switch, useLocation } from 'react-router';
    import { Header, WithAuthorization } from './common';
    import DeviceSelection from './DeviceSelection';
    import PerfectScroll from 'react-perfect-scrollbar';
    import NotFound from './NotFound';
    import ThankYou from "./Thankyou";
    
    import 'react-perfect-scrollbar/dist/css/styles.css';
    import './App.scss';
    import {ROUTES} from "../constants";
    import Login from "./Login";
    import {AuthUserContext} from "../session";
    
    const App = () => {
        const {pathname} = useLocation();
        const [authUser, setAuthUser] = useState(null as any);
        const isThankYou = pathname === ROUTES.THANKYOU;
    
        return (
            <AuthUserContext.Provider
                value={authUser}
            >
                <WithAuthorization>
                    {!isThankYou && <Header authUser={authUser}/>}
                </WithAuthorization>
    
                    <div className={`${!isThankYou ? 'appScrollContainer' : ''}`}>
                        <PerfectScroll>
                            <Switch>
                                <Route exact path={[ROUTES.ROOT, ROUTES.HOME]} component={() => <WithAuthorization><DeviceSelection/></WithAuthorization>} />
                                <Route path={ROUTES.THANKYOU} component={() => <WithAuthorization><ThankYou/></WithAuthorization>} />
                                <Route path={ROUTES.LOGIN} component={() => <Login setAuthUser={(user: any) => setAuthUser(user)} />}/>
                                <Route path="*" component={NotFound} />
                            </Switch>
                        </PerfectScroll>
                    </div>
            </AuthUserContext.Provider>
        );
    }
    
    export default App;


我的错误只在于这句话：

return listener();

当我在
useffect
中定义listener时，它会立即被取消订阅。
应该是：

return () => listener()

除此之外，一切正常。
我的错误只是这一行：

return listener();

当我在
useffect
中定义listener时，它会立即被取消订阅。
应该是：

return () => listener()

除此之外，一切正常。
它将在登录和注销时触发。您是如何观察到它对注销不起作用的？请编辑问题，提供完整的步骤和代码。这是真的，我正试图使注销触发onAuthChanged，但即使这样也没有发生。将更新问题。@DougStevenson，我已经添加了应用程序结构。甚至不确定是否存在错误，但结果不言而喻。我刚刚注意到，当我注销时，会话被删除，但函数仍然没有触发。它将在登录和注销时触发。您是如何观察到它对注销不起作用的？请编辑问题，提供完整的步骤和代码。这是真的，我正试图使注销触发onAuthChanged，但即使这样也没有发生。将更新问题。@DougStevenson，我已经添加了应用程序结构。我甚至不确定这个错误是否存在，但结果不言而喻。我刚刚注意到，当我注销时，会话被删除，但函数仍然没有被触发。
return listener();

return () => listener()