如何在Nuxt3中以类型安全的方式获取Supabase Bearer Token？

你遇到的问题是因为auth.headers是Supabase GoTrueClient类的受保护属性，TypeScript会严格限制外部直接访问——即使运行时能正常获取值，但不符合类型校验规则。

正确的做法是使用Supabase官方提供的公开方法获取会话令牌，而非直接访问内部受保护属性。修改后的代码如下：

<script setup lang="ts">
import { EllipsisHorizontalIcon } from '@heroicons/vue/20/solid'

const { auth } = useSupabaseAuthClient();

// 通过官方方法获取当前会话
const { data: session } = await auth.getSession();

const { data: tenants, pending, error, refresh } = await useFetch('http://localhost:3000/tenants', {
  headers: {
    // 从会话中提取access_token，构造Bearer验证头
    'Authorization': session ? `Bearer ${session.access_token}` : ''
  }
})
</script>

补充说明 #

1. auth.getSession()是Supabase官方提供的公开API，专门用于获取当前用户的会话信息，返回的session对象包含合法的access_token
2. 加入空值判断，避免会话未建立时出现空指针问题
3. 该写法完全符合TypeScript的类型规范，不会再触发「属性受保护」的报错

内容的提问来源于stack exchange，提问作者jhh