使用 RedwoodJS 构建用户管理应用

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
3
SUPABASE_URL=YOUR_SUPABASE_URLSUPABASE_KEY=YOUR_SUPABASE_ANON_KEYSUPABASE_JWT_SECRET=YOUR_SUPABASE_JWT_SECRET

1
2
3
4
5
6
7
8
9
[web]  title = "Supabase Redwood 教程"  port = 8910  apiProxyPath = "/.redwood/functions"  includeEnvironmentVariables = ["SUPABASE_URL", "SUPABASE_KEY"][api]  port = 8911[browser]  open = true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// ... Redwood 导入import { AuthProvider } from '@redwoodjs/auth'import { createClient } from '@supabase/supabase-js'// ...const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY)const App = () => (  <FatalErrorBoundary page={FatalErrorPage}>    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">      <AuthProvider client={supabase} type="supabase">        <RedwoodApolloProvider>          <Routes />        </RedwoodApolloProvider>      </AuthProvider>    </RedwoodProvider>  </FatalErrorBoundary>)export default App

1
2
3
4
5
6
7
8
9
10
11
12
import { Router, Route } from '@redwoodjs/router'const Routes = () => {  return (    <Router>      <Route path="/" page={HomePage} name="home" />      <Route notfound page={NotFoundPage} />    </Router>  )}export default Routes

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
import { useState } from 'react'import { useAuth } from '@redwoodjs/auth'const Auth = () => {  const { logIn } = useAuth()  const [loading, setLoading] = useState(false)  const [email, setEmail] = useState('')  const handleLogin = async (email) => {    try {      setLoading(true)      const { error } = await logIn({ email })      if (error) throw error      alert('请查看您的邮箱获取登录链接！')    } catch (error) {      alert(error.error_description || error.message)    } finally {      setLoading(false)    }  }  return (    <div className="row flex-center flex">      <div className="col-6 form-widget">        <h1 className="header">Supabase + RedwoodJS</h1>        <p className="description">通过下方邮箱接收魔法链接登录</p>        <div>          <input            className="inputField"            type="email"            placeholder="您的邮箱"            value={email}            onChange={(e) => setEmail(e.target.value)}          />        </div>        <div>          <button            onClick={(e) => {              e.preventDefault()              handleLogin(email)            }}            className={'button block'}            disabled={loading}          >            {loading ? <span>加载中</span> : <span>发送魔法链接</span>}          </button>        </div>      </div>    </div>  )}export default Auth

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { useState, useEffect } from 'react'import { useAuth } from '@redwoodjs/auth'const Account = () => {  const { client: supabase, currentUser, logOut } = useAuth()  const [loading, setLoading] = useState(true)  const [username, setUsername] = useState(null)  const [website, setWebsite] = useState(null)  const [avatar_url, setAvatarUrl] = useState(null)  useEffect(() => {    getProfile()  }, [supabase.auth.session])  async function getProfile() {    try {      setLoading(true)      const user = supabase.auth.user()      const { data, error, status } = await supabase        .from('profiles')        .select(`username, website, avatar_url`)        .eq('id', user.id)        .single()      if (error && status !== 406) {        throw error      }      if (data) {        setUsername(data.username)        setWebsite(data.website)        setAvatarUrl(data.avatar_url)      }    } catch (error) {      alert(error.message)    } finally {      setLoading(false)    }  }  async function updateProfile({ username, website, avatar_url }) {    try {      setLoading(true)      const user = supabase.auth.user()      const updates = {        id: user.id,        username,        website,        avatar_url,        updated_at: new Date(),      }      const { error } = await supabase.from('profiles').upsert(updates, {        returning: 'minimal', // 插入后不返回值      })      if (error) {        throw error      }      alert('个人资料已更新！')    } catch (error) {      alert(error.message)    } finally {      setLoading(false)    }  }  return (    <div className="row flex-center flex">      <div className="col-6 form-widget">        <h1 className="header">Supabase + RedwoodJS</h1>        <p className="description">您的个人资料</p>        <div className="form-widget">          <div>            <label htmlFor="email">邮箱</label>            <input id="email" type="text" value={currentUser.email} disabled />          </div>          <div>            <label htmlFor="username">姓名</label>            <input              id="username"              type="text"              value={username || ''}              onChange={(e) => setUsername(e.target.value)}            />          </div>          <div>            <label htmlFor="website">网站</label>            <input              id="website"              type="url"              value={website || ''}              onChange={(e) => setWebsite(e.target.value)}            />          </div>          <div>            <button              className="button primary block"              onClick={() => updateProfile({ username, website, avatar_url })}              disabled={loading}            >              {loading ? '加载中...' : '更新'}            </button>          </div>          <div>            <button className="button block" onClick={() => logOut()}>              退出登录            </button>          </div>        </div>      </div>    </div>  )}export default Account

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { useAuth } from '@redwoodjs/auth'import { MetaTags } from '@redwoodjs/web'import Account from 'src/components/Account'import Auth from 'src/components/Auth'const HomePage = () => {  const { isAuthenticated } = useAuth()  return (    <>      <MetaTags title="Welcome" />      {!isAuthenticated ? <Auth /> : <Account />}    </>  )}export default HomePage

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
import { useEffect, useState } from 'react'import { useAuth } from '@redwoodjs/auth'const Avatar = ({ url, size, onUpload }) => {  const { client: supabase } = useAuth()  const [avatarUrl, setAvatarUrl] = useState(null)  const [uploading, setUploading] = useState(false)  useEffect(() => {    if (url) downloadImage(url)  }, [url])  async function downloadImage(path) {    try {      const { data, error } = await supabase.storage.from('avatars').download(path)      if (error) {        throw error      }      const url = URL.createObjectURL(data)      setAvatarUrl(url)    } catch (error) {      console.log('下载图片错误: ', error.message)    }  }  async function uploadAvatar(event) {    try {      setUploading(true)      if (!event.target.files || event.target.files.length === 0) {        throw new Error('请选择要上传的图片')      }      const file = event.target.files[0]      const fileExt = file.name.split('.').pop()      const fileName = `${Math.random()}.${fileExt}`      const filePath = `${fileName}`      const { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)      if (uploadError) {        throw uploadError      }      onUpload(filePath)    } catch (error) {      alert(error.message)    } finally {      setUploading(false)    }  }  return (    <div>      {avatarUrl ? (        <img          src={avatarUrl}          alt="用户头像"          className="avatar image"          style={{ height: size, width: size }}        />      ) : (        <div className="avatar no-image" style={{ height: size, width: size }} />      )}      <div style={{ width: size }}>        <label className="button primary block" htmlFor="single">          {uploading ? '上传中...' : '上传'}        </label>        <input          style={{            visibility: 'hidden',            position: 'absolute',          }}          type="file"          id="single"          accept="image/*"          onChange={uploadAvatar}          disabled={uploading}        />      </div>    </div>  )}export default Avatar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 导入新组件import Avatar from 'src/components/Avatar'// ...return (  <div className="form-widget">    {/* 添加到主体部分 */}    <Avatar      url={avatar_url}      size={150}      onUpload={(url) => {        setAvatarUrl(url)        updateProfile({ username, website, avatar_url: url })      }}    />    {/* ... */}  </div>)