如何在Supabase中实现认证状态变更回调以显示隐藏Div

Supabase 提供了 supabase.auth.onAuthStateChange 方法来监听用户认证状态变化，完全可以实现你要的功能。以下是对应 Firebase 代码的 Supabase 实现版本：

完整代码示例 #

// 匿名登录（对应 Firebase 的 signInAnonymously）
const { data, error } = await supabase.auth.signInAnonymously();

// 监听认证状态变化
supabase.auth.onAuthStateChange((event, session) => {
  // 当用户登录（包含匿名登录成功）时，显示隐藏的 div
  if (event === 'SIGNED_IN' && session?.user) {
    HiddenDiv.style.display = 'block';
  }
  // 可选：用户登出时隐藏 div
  if (event === 'SIGNED_OUT') {
    HiddenDiv.style.display = 'none';
  }
});

关键说明 #

• onAuthStateChange 接收两个参数：event 表示当前状态事件（可选值包括 SIGNED_IN、SIGNED_OUT、TOKEN_REFRESHED 等），session 包含当前用户会话信息。
• 匿名登录成功后，event 会触发 SIGNED_IN，此时 session.user 会存在，可以据此判断用户已登录。
• 如果你不需要区分具体事件，也可以直接判断 session 是否存在：

  supabase.auth.onAuthStateChange((_event, session) => {
    HiddenDiv.style.display = session ? 'block' : 'none';
  });
  

这样就和你 Firebase 的实现逻辑完全一致了。

内容的提问来源于stack exchange，提问作者Khaled-The-Dev