Supabase的用戶管理系統by API

鼻爾蓋茲

發佈於即時、安全、強大：探索 Supabase 的無限可能

更新於 2023/12/11發佈於 2023/08/14閱讀時間約 8 分鐘

在上篇文章中我們實際安裝並且使用了supabase-js連接我們的supabase資料庫，並且已經測試成功。

Supabase的身份認證和會員管理

本篇文章就來導覽一下supabase-js的文件，還有在頁面裡面示範會員管理系統的登入和登出，以及在客戶端的操作。

嗨歡迎閱讀我的文章！這是關於Supabase的系列文章，內容包含介紹Supabase是什麼、基本功能應用，深入了解Supabase的進階功能應用。

supabase-js文件

在每個supabase專案裡面都有一份快速上手的文件，而且這份文件是自動生成出來的文件，這個意思是說只要這個專案裡面資料庫的表格有任何新增，這份文件就有對應的文件可以查詢，如果對於API有更多選項想要查詢的話可以另外在官網的地方查詢詳細文件。

快速上手文件

快速上手文件的位置就在每個supabase專案裡面，一樣進入專案後台以後，進入API Docs的頁籤。

在這裡就有寫基本supabase-js的安裝和初始化的方式，這些方式在上篇文章中都有提到所以先跳過，在下面User Management的頁面裡面就有寫所有關於會員管理系統的內容。

會員管理系統的說明文件

在Tables and Views的頁面裡面就是對應supabase的資料庫表格和欄位，裡面有寫基本的查詢表格內容該如何撰寫、插入資料與刪除資料，或是直接在查詢的時候過濾資料也有詳細介紹，有需要的時候記得來這個頁面裡面查看一下。

完整文件

完整文件位置: supabase-js文件

這個supabase-js套件本身已經包含所有REST API，只需要按照使用情境調用符合的功能即可；除了最一開始的初始化和安裝，套件還分成4大部分，DATABASE(DB操作)、AUTH(會員管理)、REALTIME(實時更新)、STORAGE(儲存庫操作)等區塊，這些區塊都可以在文件的左方直接找到，或是直接在搜尋欄位內直接搜尋。

當然如果有需要安裝與初始化可以參考我的上篇文章。

Supabase的JavaScript Client Library串接實作

AUTH(會員管理)實作

會員管理就是註冊登入登出等功能串接，馬上先去文件裡面查查有關的內容。

會員說明文件中有關註冊會員與登入會員的部分

註冊實作

預計在註冊的頁面裡面使用上面的signup這個函式，點擊註冊的時候把email和密碼送出。

在前端頁面中嘗試會員登入

上方圖是我的註冊畫面，在頁面裡面就使用兩個變數分別紀錄用戶輸入的email和密碼，點擊註冊按鈕的時候就把email和密碼帶入doSignUp裡面，用一個loading記錄是否正在等待，等待註冊結束以後把loading狀態取消，程式碼大概是長得像下面這樣。

const loading = ref(false)
const doSignUp = async ({ email, password }) => {
  loading.value = true
  const { data, error } = await supabase.auth.signUp({
    email: email,
    password: password
  })
  loading.value = false
}

登入實作

登入大概跟註冊長得90%相似，頁面如上圖所示，一樣會準備兩個變數記錄用戶輸入的email和密碼，loading變數記錄是否正在等待，點擊登入按鈕執行doLogin，程式碼大概長得跟下方一樣。

const loading = ref(false)
const doLogin = async ({ email, password }) => {
  loading.value = true
  const { data, error } = await supabase.auth.signInWithPassword({
    email: email,
    password: password
  })
  loading.value = false
}

session介紹

用戶成功登入或註冊成功以後，supabase-js就會自動幫我們把登入狀態session處理好了，在session有效的期間發送的request都有夾帶用來辨別身份的資訊在headers裡面，完全不用自己動手處理用戶登入狀態等問題。

當然如果要記錄用戶的識別ID可以從剛剛註冊和登入成功的返回資訊裡面找到，或是使用supabase.auth.getUser()或supabase.auth.getSession()重新取得用戶資訊。

登出實作

登出和註冊和登入一樣都有專屬的函式可以調用，這個登出就是把儲存在用戶端的session給註銷掉。

登出在我的畫面上是放在Header上面，有登入的狀態才會顯示登出兩字，點擊會執行登出。

而這段程式碼也更簡短一點，需要注意的是如果本身在APP有紀錄用戶ID和email的地方也要一起清除，大概長得像下面這樣。

const logout = async () => {
  const { error } = await supabase.auth.signOut()
  store.id = ''
  store.email = ''
}

維持登入狀態

在用戶已登入的狀態下，用戶再度開啟APP頁面或是用戶重新整理頁面，正常前端需要把儲存的登入狀態session拿出來檢查，用來復原用戶的登入狀態，而這件事情supabase-js也已經幫我們做好了，只需要調用用戶狀態變更事件就可以接收到用戶的登入狀態session，範例程式碼如下方。

<script setup>
import { useUserStore } from './stores/user'
import supabase from './supabase'
import { onMounted } from 'vue'


const store = useUserStore()
onMounted(async () => {
  supabase.auth.onAuthStateChange((_, session) => {
    if (session === null) return
    store.id = session.user.id
    store.email = session.user.email
  })
})

</script>