身份验证流程反应原生答案

【问题标题】：Authentication flow react native身份验证流程反应原生
【发布时间】：2021-07-21 12:15:44
【问题描述】：

我的应用程序的运行方式是无需登录即可看到应用程序的一部分，而要查看其余部分，用户必须登录。我的应用程序由 2 个堆栈组成，即身份验证堆栈和应用堆栈。身份验证堆栈包含登录和注册屏幕。目前这是我的应用程序的逻辑。例如，假设用户转到消息选项卡，该选项卡只有在用户登录时才可见。在 MessagesScreen.js 上，我有以下代码。

const [user, setUser] = useState();

useEffect(() => {
console.log('Use effect called');
if (!user) {
  fetchUser();
  if (!user) {
    console.log('THis is called');
    navigation.navigate('Auth', {
      screen: 'Login',
      params: {comingFromScreen: 'Messages'},
    });
  } else {
    console.log(user);
  }
}
}, []);

const fetchUser = async () => {
try {
  const userData = await getUser();
  setUser(userData);
} catch (e) {
  console.log('No user found');
}
};

getUser，是如下函数：

export const getUser = async () => {
  try {
    let userData = await AsyncStorage.getItem('userData');
    let data = JSON.parse(userData);
  } catch (error) {
    console.log('Something went wrong', error);
  }
};

LoginScreen 包含以下代码：

const handleLogin = () => {
    if (email === '' || password === '') {
      alert('Email or password not provided');
    } else {
      firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((res) => {
          storeUser(JSON.stringify(res.user));
        })
        .catch((e) => alert(e.message));
      navigation.navigate('Home', {screen: comingFromScreen});
    }
  };

storeUser 如下：

export const storeUser = async (user) => {
  try {
    await AsyncStorage.setItem('userData', JSON.stringify(user));
  } catch (error) {
    console.log('Something went wrong', error);
  }
};

当我第一次导航到消息屏幕时，逻辑正常，我会看到登录屏幕。但是，如果我点击登录屏幕上的“X”按钮，这会将我带回主屏幕，然后返回消息屏幕，我会看到该屏幕，而且，甚至不会调用 useEffect。

我对本机反应有点新，所以有人可以告诉我我需要改变什么才能达到我想要的效果吗？

【问题讨论】：

查看我的Snack

标签： react-native authentication react-navigation use-effect asyncstorage

【解决方案1】：

您可以通过执行以下操作使 useEffect 依赖于用户状态，并且每次用户状态更改时都会调用它。

只要用户发生如下变化，它就会一直调用useEffect：

useEffect(() => {
        console.log('Use effect called');
        if (!user) {
          fetchUser(); 
          if (!user) {
            navigation.navigate('Auth', {
              screen: 'Login',
              params: {comingFromScreen: 'Messages'},
            });
          } else {
            console.log(user);
          }
        }
    }, [user]);

【讨论】：

【解决方案2】：

找到了解决这个问题的方法，我用 useFocusEffect 钩子代替了 useEffect 似乎解决了这个问题。

【讨论】：