javascript - Supabase onAuthStateChanged - 如何正确等待请求完成以防止使用 useEffect 闪烁？

Question

在授权方面一切正常。我什至有一个加载状态设置，以便加载器显示直到状态更改，但我在重新加载时仍然会闪烁。这种闪烁只发生在 Supabase 上。我之前使用的是 Firebase 版本，它与我的代码完美配合。

这里有一个视频供引用:https://imgur.com/a/5hywXj5

编辑:更新代码到当前版本

export default function Navigation() {
  const { user, setUser } = useContext(AuthenticatedUserContext);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const session = supabase.auth.session();
    setUser(session?.user ?? null);

    const { data: listener } = supabase.auth.onAuthStateChange((_: any, session: any) => {
      setUser(session?.user ?? null);
    });

    setIsLoading(false);
    return () => {
      listener?.unsubscribe();
    };
  }, []);

  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator color={Theme.colors.purple} size="large" />
      </View>
    );
  }

  return (
    <NavigationContainer linking={LinkingConfiguration}>{user ? <AppStack /> : <AuthStack />}</NavigationContainer>
  );
}

Answer 1

为其他人回顾一下，onAuthStateChange 不会在第一页加载时执行，因此您使用 getUserAuthStatus 异步函数触发它。但是 session() 函数不是异步的，如果没有用户 session ，将立即返回一个 null 的结果，或者返回一个已存储在 localStorage 中的 session 。

在这种情况下，getUserAuthStatus 的结果将始终返回 null。然后 onAuthStateChange 将触发 SIGNED_IN 事件和随后将设置用户的 session 。

此外，onAuthStateChange 函数应该在您执行 session 步骤之前注册，以便捕获任何触发的事件。在当前形式中，可以在 session() 调用之后但在注册处理程序之前直接触发事件。

所以回顾渲染步骤将是:

第一步

isLoading: true
user: null

第二步

isLoading: false
user: null

第三步

isLoading false
user: {...}

据我所知，直接使用 session 而不认为它是异步的就可以解决问题。