Supabase RLS 行级安全策略

// app/notes/NotesClient.tsx
'use client'

import { useEffect, useState } from 'react'
import { createClient } from '@/lib/supabase/browser'

type Note = {
  id: string
  title: string
  content: string
  created_at: string
}

export function NotesClient() {
  const [notes, setNotes] = useState<Note[]>([])
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let mounted = true
    const supabase = createClient()

    async function loadNotes() {
      try {
        const { data, error } = await supabase
          .from('notes')
          .select('id,title,content,created_at')
          .order('created_at', { ascending: false })

        if (error) throw error
        if (mounted) setNotes((data ?? []) as Note[])
      } catch (error) {
        console.error('[NotesClient]', error)
        if (mounted) setError('加载笔记失败')
      } finally {
        if (mounted) setLoading(false)
      }
    }

    loadNotes()
    return () => {
      mounted = false
    }
  }, [])

  if (loading) return <p>加载中...</p>
  if (error) return <p role="alert">{error}</p>

  return (
    <ul>
      {notes.map(note => (
        <li key={note.id}>
          <h3>{note.title}</h3>
          <p>{note.content}</p>
        </li>
      ))}
    </ul>
  )
}

// app/notes/page.tsx
import { redirect } from 'next/navigation'
import { createClient } from '@/lib/supabase/server'

export default async function NotesPage() {
  const supabase = await createClient()

  try {
    const { data: userData, error: userError } = await supabase.auth.getUser()

    if (userError || !userData.user) {
      redirect('/login')
    }

    const { data, error } = await supabase
      .from('notes')
      .select('id,title,content,created_at')
      .order('created_at', { ascending: false })

    if (error) throw error

    return (
      <main>
        <h1>我的笔记</h1>
        <ul>
          {(data ?? []).map(note => (
            <li key={note.id}>
              <h2>{note.title}</h2>
              <p>{note.content}</p>
            </li>
          ))}
        </ul>
      </main>
    )
  } catch (error) {
    console.error('[NotesPage]', error)
    return <p>笔记加载失败，请稍后重试。</p>
  }
}

// app/notes/CreateNoteForm.tsx
'use client'

import { useActionState } from 'react'
import { createNote, type CreateNoteState } from './actions'

const initialState: CreateNoteState = { ok: false, message: '' }

export function CreateNoteForm() {
  const [state, action, pending] = useActionState(createNote, initialState)

  return (
    <form action={action}>
      <input name="title" required maxLength={80} placeholder="标题" />
      <textarea name="content" required maxLength={5000} placeholder="内容" />
      <button disabled={pending}>{pending ? '创建中...' : '创建笔记'}</button>
      {state.message && <p role="status">{state.message}</p>}
    </form>
  )
}