如何在SvelteKit中仅用Supabase检查用户是否已登录？

一、客户端检查（前端组件/页面） #

在前端可以直接调用Supabase Auth的原生方法获取用户状态，或者监听状态变化实现实时响应。

1. 直接获取当前用户 #

在Svelte页面（如+page.svelte）中执行一次性检查：

<script>
  import { supabase } from '$lib/supabaseClient';
  let user = null;
  let loading = true;

  async function checkLoginStatus() {
    const { data: { user: currentUser }, error } = await supabase.auth.getUser();
    if (error) console.error('获取用户状态失败:', error);
    user = currentUser;
    loading = false;
  }

  // 页面加载时触发检查
  checkLoginStatus();
</script>

{#if loading}
  <p>加载中...</p>
{:else if user}
  <p>当前登录用户：{user.email}</p>
  <button on:click={async () => await supabase.auth.signOut()}>登出</button>
{:else}
  <p>未登录，请前往登录页</p>
{/if}

2. 实时监听认证状态变化 #

如果需要实时响应登录/登出操作，使用onAuthStateChange监听状态：

<script>
  import { supabase } from '$lib/supabaseClient';
  let user = null;

  // 监听状态变更
  supabase.auth.onAuthStateChange((event, session) => {
    user = session?.user ?? null;
  });

  // 初始化时获取当前用户
  async function initUser() {
    const { data: { user: initialUser } } = await supabase.auth.getUser();
    user = initialUser;
  }

  initUser();
</script>

{#if user}
  <p>已登录：{user.email}</p>
{:else}
  <p>未登录状态</p>
{/if}

二、服务器端检查（+page.server.ts/+layout.server.ts） #

服务器端无法自动读取浏览器Cookie，需要手动将请求的Cookie传递给Supabase客户端，才能正确验证用户会话。

示例：在页面加载函数中检查用户 #

以首页/+page.server.ts为例：

import type { PageServerLoad } from './$types';
import { supabase } from '$lib/supabaseClient';

export const load: PageServerLoad = async ({ request }) => {
  // 从请求头中提取Cookie
  const cookieHeader = request.headers.get('cookie');
  
  // 创建带Cookie的临时Supabase客户端（避免污染全局实例）
  const serverSupabase = supabase.auth.setAuth(cookieHeader ?? '');

  const { data: { user }, error } = await serverSupabase.auth.getUser();
  
  if (error) {
    console.error('服务器端验证用户失败:', error);
    return { user: null };
  }

  return { user };
};

在对应的+page.svelte中接收服务器返回的用户数据：

<script>
  export let data;
</script>

{#if data.user}
  <p>服务器端验证通过：{data.user.email}</p>
{:else}
  <p>服务器端检测到未登录</p>
{/if}

补充：完善登录逻辑 #

在你的/signin/+page.server.ts中，登录成功后可添加重定向逻辑，同时处理错误反馈：

import type { Actions } from "./$types";
import { supabase } from "$lib/supabaseClient";
import { redirect } from '@sveltejs/kit';

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const email = formData.get("email") as string;
    const password = formData.get("password") as string;

    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });

    if (error) {
      return { error: error.message };
    }

    // 登录成功后重定向到首页
    if (data.session) {
      throw redirect(303, '/');
    }

    return { success: false };
  },
} satisfies Actions;

核心方法说明 #

• supabase.auth.getUser()：直接返回当前认证用户，未登录时返回null
• supabase.auth.getSession()：获取完整会话信息（含令牌、用户数据），适合需要会话细节的场景
• 服务器端必须手动传递Cookie，因为Supabase客户端在服务端环境无法自动读取浏览器Cookie

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