在 Supabase 中获取用户电子邮件并显示在 HTML 中：一步一步的指南

2024-03-02 18:36:05

在 Supabase 应用中，开发者经常需要获取当前登录用户的电子邮件地址，并在网页上显示出来。这看似简单，但其中涉及到异步操作和 DOM 操作，如果处理不当，可能会导致页面显示错误或用户体验不佳。本文将深入探讨如何在 Supabase 中安全、高效地获取用户电子邮件，并将其正确地呈现在 HTML 页面中。

首先，我们需要明确一点：Supabase 的 auth.getUser() 方法是一个异步操作。这意味着它不会立即返回用户信息，而是返回一个 Promise 对象。我们必须使用 await （或者 .then() 方法）来等待 Promise 的解析，才能获取到实际的用户信息。

// 使用 async/await 获取用户信息
async function getUserEmail() {
  const { data: { user } } = await supabase.auth.getUser();
  return user ? user.email : null;
}

获取到用户电子邮件后，下一步就是将其显示在 HTML 页面中。我们可以使用 JavaScript 的 DOM 操作来实现这一点。假设我们有一个 <span> 元素，其 id 为 user-email，我们就可以将电子邮件地址设置到该元素的 textContent 属性中。

// 将电子邮件地址显示在 HTML 中
async function displayUserEmail() {
  const email = await getUserEmail();
  if (email) {
    document.getElementById("user-email").textContent = email;
  } else {
    // 用户未登录，可以显示默认值或提示信息
    document.getElementById("user-email").textContent = "请登录";
  }
}

// 页面加载完成后调用 displayUserEmail 函数
window.addEventListener('load', displayUserEmail);

这里需要注意的是，我们应该在页面加载完成后再调用 displayUserEmail 函数。这是因为如果页面尚未加载完成，document.getElementById("user-email") 可能会返回 null，导致程序出错。

为了使代码更加健壮，我们还可以添加一些错误处理机制。例如，如果 getUser() 方法返回错误，我们可以捕获该错误并进行相应的处理。

async function getUserEmail() {
  try {
    const { data: { user } } = await supabase.auth.getUser();
    return user ? user.email : null;
  } catch (error) {
    console.error("获取用户信息失败:", error);
    return null;
  }
}

此外，我们还可以考虑使用一些前端框架（如 React、Vue 等）来简化代码的编写和维护。这些框架通常提供了更便捷的方式来处理异步操作和 DOM 操作。

例如，在 React 中，我们可以使用 useUser hook 来获取用户信息，并使用 JSX 语法来渲染页面元素。

import { useUser } from '@supabase/auth-helpers-react'

function MyComponent() {
  const { user } = useUser()

  return (
    <div>
      {user ? (
        <span>欢迎，{user.email}</span>
      ) : (
        <span>请登录</span>
      )}
    </div>
  )
}