firebase.auth().signOut() 在单击注销后未重定向回 mainNav

Posted 2023-02-22

【中文标题】firebase.auth().signOut() 在单击注销后未重定向回 mainNav

【英文标题】：firebase.auth().signOut() not redirecting back to mainNav after clicking logout

【发布时间】：2021-11-11 04:13:12

【问题描述】：

我正在使用 react native 和 firebase 构建一个简单的 react native 应用程序，并在尝试注销用户时遇到一个小问题，目前当按下注销时，它不会重定向回登录页面。

首页

<Text>Home Screen</Text>
            <Button title="Sign Out" onPress=signOut />

退出功能

    const signOut = async () => 
        firebase.auth().signOut();
    

主导航

const MainNav : FC = () => 
    const [user, setUser] = useState<firebase.User | null>(null);

    const bootstrap = () => 
        firebase.auth().onAuthStateChanged(_user => 
            if(_user)
                setUser(_user)
            
        )
    

    

    useEffect(() => 
        bootstrap()
    , [])


    return (
        <NavigationContainer>
            user !== null ? <AppStack /> : <AuthStack />
        </NavigationContainer>
    )


export default MainNav;

授权栈

import React,  FC  from 'react';
import createStackNavigator from '@react-navigation/stack'
import SignUp, Login from '../screens'
const Navigator, Screen = createStackNavigator();

const AuthStack : FC = () => 
    return (
        <Navigator screenOptions=headerShown: false>
            <Screen name="signup" component=SignUp/>
            <Screen name="login" component=Login/>
        </Navigator>
    )
 

export default AuthStack;

应用堆栈

const AppStack : FC = () => 
    return (
        <Navigator screenOptions=headerShown: false>
            <Screen name="home" component=Home/>
            <Screen name="dashboard" component=Dashboard/>
        </Navigator>
    )
 

export default AppStack;

【参考方案1】：

那是因为您实际上忽略了注销事件：

const bootstrap = () => 
  firebase.auth().onAuthStateChanged(_user => 
    if(_user)  // <-- this will be null when logged out!
      setUser(_user)
    
  )

此外，您不应该像您在这里一样包装onAuthStateChanged 函数并忽略它的返回值（它是取消订阅函数）：

useEffect(() => 
  bootstrap()
, [])

您应该使用（或它的变体）：

useEffect(() => firebase.auth().onAuthStateChanged(_user => setUser(_user)), [])

上面的行使用来自firebase.auth() 的最新值更新user，并在卸载组件时正确取消订阅侦听器。