使用 SvelteKit 构建用户管理应用

1
2
3
4
supabase link --project-ref <project-id># 您可以从项目的仪表板 URL 获取 <project-id>：https://supabase.com/dashboard/project/<project-id>supabase db pull

1
2
PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL"PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// src/hooks.server.tsimport { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public'import { createServerClient } from '@supabase/ssr'import type { Handle } from '@sveltejs/kit'export const handle: Handle = async ({ event, resolve }) => {  event.locals.supabase = createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {    cookies: {      getAll: () => event.cookies.getAll(),      /**       * SvelteKit 的 cookies API 要求在 cookie 选项中显式设置 `path`。       * 将 `path` 设置为 `/` 可复制之前的标准行为。       */      setAll: (cookiesToSet) => {        cookiesToSet.forEach(({ name, value, options }) => {          event.cookies.set(name, value, { ...options, path: '/' })        })      },    },  })  /**   * 与 `supabase.auth.getSession()` 不同（它返回会话但_不_验证 JWT），   * 此函数还会调用 `getUser()` 在返回会话前验证 JWT。   */  event.locals.safeGetSession = async () => {    const {      data: { session },    } = await event.locals.supabase.auth.getSession()    if (!session) {      return { session: null, user: null }    }    const {      data: { user },      error,    } = await event.locals.supabase.auth.getUser()    if (error) {      // JWT 验证失败      return { session: null, user: null }    }    return { session, user }  }  return resolve(event, {    filterSerializedResponseHeaders(name) {      return name === 'content-range' || name === 'x-supabase-api-version'    },  })}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/app.d.tsimport { SupabaseClient, Session } from '@supabase/supabase-js'declare global {  namespace App {    interface Locals {      supabase: SupabaseClient      safeGetSession(): Promise<{ session: Session | null; user: User | null }>    }    interface PageData {      session: Session | null      user: User | null    }    // interface Error {}    // interface Platform {}  }}

1
2
3
4
5
6
7
8
9
10
11
12
// src/routes/+layout.server.tsimport type { LayoutServerLoad } from './$types'export const load: LayoutServerLoad = async ({ locals: { safeGetSession }, cookies }) => {  const { session, user } = await safeGetSession()  return {    session,    user,    cookies: cookies.getAll(),  }}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// src/routes/+layout.tsimport { createBrowserClient, createServerClient, isBrowser } from '@supabase/ssr'import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public'import type { LayoutLoad } from './$types'export const load: LayoutLoad = async ({ fetch, data, depends }) => {  depends('supabase:auth')  const supabase = isBrowser()    ? createBrowserClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {        global: {          fetch,        },      })    : createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {        global: {          fetch,        },        cookies: {          getAll() {            return data.cookies          },        },      })  /**   * 在此处使用 `getSession` 没有问题，因为在客户端 `getSession` 是安全的，   * 而在服务器端，它会从 `LayoutData` 读取 `session`，后者已使用 `safeGetSession` 安全检查了会话。   */  const {    data: { session },  } = await supabase.auth.getSession()  return { supabase, session }}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- src/routes/+layout.svelte --><script lang="ts">	import '../styles.css'	import { invalidate } from '$app/navigation'	import { onMount } from 'svelte'	export let data	let { supabase, session } = data	$: ({ supabase, session } = data)	onMount(() => {		const { data } = supabase.auth.onAuthStateChange((event, newSession) => {			if (newSession?.expires_at !== session?.expires_at) {				invalidate('supabase:auth')			}		})		return () => data.subscription.unsubscribe()	})</script><svelte:head>	<title>用户管理</title></svelte:head><div class="container" style="padding: 50px 0 100px 0">	<slot /></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!-- src/routes/+page.svelte --><script lang="ts">	import { enhance } from '$app/forms'	import type { ActionData, SubmitFunction } from './$types.js'	export let form: ActionData;	let loading = false	const handleSubmit: SubmitFunction = () => {		loading = true		return async ({ update }) => {			update()			loading = false		}	}</script><svelte:head>	<title>用户管理</title></svelte:head><form class="row flex flex-center" method="POST" use:enhance={handleSubmit}>	<div class="col-6 form-widget">		<h1 class="header">Supabase + SvelteKit</h1>		<p class="description">通过下方邮箱接收魔法链接登录</p>		{#if form?.message !== undefined}		<div class="success {form?.success ? '' : 'fail'}">			{form?.message}		</div>		{/if}		<div>			<label for="email">邮箱地址</label>			<input				id="email"				name="email"				class="inputField"				type="email"				placeholder="您的邮箱"				value={form?.email ?? ''}			/>		</div>		{#if form?.errors?.email}		<span class="flex items-center text-sm error">			{form?.errors?.email}		</span>		{/if}		<div>			<button class="button primary block">				{ loading ? '加载中' : '发送魔法链接' }			</button>		</div>	</div></form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// src/routes/+page.server.tsimport { fail, redirect } from '@sveltejs/kit'import type { Actions, PageServerLoad } from './$types'export const load: PageServerLoad = async ({ url, locals: { safeGetSession } }) => {  const { session } = await safeGetSession()  // 如果用户已登录，则重定向到账户页面  if (session) {    redirect(303, '/account')  }  return { url: url.origin }}export const actions: Actions = {  default: async (event) => {    const {      url,      request,      locals: { supabase },    } = event    const formData = await request.formData()    const email = formData.get('email') as string    const validEmail = /^[\w-\.+]+@([\w-]+\.)+[\w-]{2,8}$/.test(email)    if (!validEmail) {      return fail(400, { errors: { email: '请输入有效的邮箱地址' }, email })    }    const { error } = await supabase.auth.signInWithOtp({ email })    if (error) {      return fail(400, {        success: false,        email,        message: `遇到问题，请联系支持人员。`,      })    }    return {      success: true,      message: '请检查您的邮箱获取登录网站的魔法链接。',    }  },}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// src/routes/auth/confirm/+server.tsimport type { EmailOtpType } from '@supabase/supabase-js'import { redirect } from '@sveltejs/kit'import type { RequestHandler } from './$types'export const GET: RequestHandler = async ({ url, locals: { supabase } }) => {  const token_hash = url.searchParams.get('token_hash')  const type = url.searchParams.get('type') as EmailOtpType | null  const next = url.searchParams.get('next') ?? '/account'  /**   * 通过删除Auth流程参数来清理重定向URL   *   * 暂时保留`next`参数，因为在错误情况下需要它   */  const redirectTo = new URL(url)  redirectTo.pathname = next  redirectTo.searchParams.delete('token_hash')  redirectTo.searchParams.delete('type')  if (token_hash && type) {    const { error } = await supabase.auth.verifyOtp({ type, token_hash })    if (!error) {      redirectTo.searchParams.delete('next')      redirect(303, redirectTo)    }  }  redirectTo.pathname = '/auth/error'  redirect(303, redirectTo)}

1
<p>登录错误</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!-- src/routes/account/+page.svelte --><script lang="ts">	import { enhance } from '$app/forms';	import type { SubmitFunction } from '@sveltejs/kit';	export let data	export let form	let { session, supabase, profile } = data	$: ({ session, supabase, profile } = data)	let profileForm: HTMLFormElement	let loading = false	let fullName: string = profile?.full_name ?? ''	let username: string = profile?.username ?? ''	let website: string = profile?.website ?? ''	let avatarUrl: string = profile?.avatar_url ?? ''	const handleSubmit: SubmitFunction = () => {		loading = true		return async () => {			loading = false		}	}	const handleSignOut: SubmitFunction = () => {		loading = true		return async ({ update }) => {			loading = false			update()		}	}</script><div class="form-widget">	<form		class="form-widget"		method="post"		action="?/update"		use:enhance={handleSubmit}		bind:this={profileForm}	>		<div>			<label for="email">邮箱</label>			<input id="email" type="text" value={session.user.email} disabled />		</div>		<div>			<label for="fullName">全名</label>			<input id="fullName" name="fullName" type="text" value={form?.fullName ?? fullName} />		</div>		<div>			<label for="username">用户名</label>			<input id="username" name="username" type="text" value={form?.username ?? username} />		</div>		<div>			<label for="website">网站</label>			<input id="website" name="website" type="url" value={form?.website ?? website} />		</div>		<div>			<input				type="submit"				class="button block primary"				value={loading ? '加载中...' : '更新'}				disabled={loading}			/>		</div>	</form>	<form method="post" action="?/signout" use:enhance={handleSignOut}>		<div>			<button class="button block" disabled={loading}>退出登录</button>		</div>	</form></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!-- src/routes/account/Avatar.svelte --><script lang="ts">	import type { SupabaseClient } from '@supabase/supabase-js'	import { createEventDispatcher } from 'svelte'	export let size = 10	export let url: string	export let supabase: SupabaseClient	let avatarUrl: string | null = null	let uploading = false	let files: FileList	const dispatch = createEventDispatcher()	const downloadImage = async (path: string) => {		try {			const { data, error } = await supabase.storage.from('avatars').download(path)			if (error) {				throw error			}			const url = URL.createObjectURL(data)			avatarUrl = url		} catch (error) {			if (error instanceof Error) {				console.log('下载图片时出错: ', error.message)			}		}	}	const uploadAvatar = async () => {		try {			uploading = true			if (!files || files.length === 0) {				throw new Error('请选择要上传的图片')			}			const file = files[0]			const fileExt = file.name.split('.').pop()			const filePath = `${Math.random()}.${fileExt}`			const { error } = await supabase.storage.from('avatars').upload(filePath, file)			if (error) {				throw error			}			url = filePath			setTimeout(() => {				dispatch('upload')			}, 100)		} catch (error) {			if (error instanceof Error) {				alert(error.message)			}		} finally {			uploading = false		}	}	$: if (url) downloadImage(url)</script><div>	{#if avatarUrl}		<img			src={avatarUrl}			alt={avatarUrl ? '头像' : '无图片'}			class="avatar image"			style="height: {size}em; width: {size}em;"		/>	{:else}		<div class="avatar no-image" style="height: {size}em; width: {size}em;" />	{/if}	<input type="hidden" name="avatarUrl" value={url} />	<div style="width: {size}em;">		<label class="button primary block" for="single">			{uploading ? '上传中...' : '上传'}		</label>		<input			style="visibility: hidden; position:absolute;"			type="file"			id="single"			accept="image/*"			bind:files			on:change={uploadAvatar}			disabled={uploading}		/>	</div></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- src/routes/account/+page.svelte --><script lang="ts">  // 导入新组件  import Avatar from './Avatar.svelte'</script><div class="form-widget">  <form    class="form-widget"    method="post"    action="?/update"    use:enhance={handleSubmit}    bind:this={profileForm}  >    <!-- 添加到主体部分 -->    <Avatar        {supabase}        bind:url={avatarUrl}        size={10}        on:upload={() => {          profileForm.requestSubmit();        }}      />    <!-- 其他表单元素 -->  </form></div>