Supabase的用戶管理系統by API

supabase-js文件

快速上手文件

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

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

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

完整文件

• 完整文件位置:

這個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> 第一個參數是事件名稱，有多個相對應的事件可以處理，建議直接參考onauthstatechange文件，第二個參數則是重要的登入狀態session，當然如果原本用戶就沒有登入的話會是null，拿到session後就可以決定要讓用戶重回登入還是去別的地方。 總結 supabase-js的函式庫中，註冊、登入和登出都相當簡短易讀，而且把常用的功能都準備好給開發者直接調用，這樣在開發APP的時候就免於撰寫常用的登入登出邏輯，以及減少人為的疏失，讓開發者能更專注於APP全新功能上。 有興趣的內容 Zeabur：一個讓您的服務部署變得輕而易舉的平台，無論您使用何種程式語言或開發框架，都能快速上手，釋放您的創造力！ 六角學院的Vue直播班課程：掌握Vue 3的神秘面紗，透過專業指導和實戰練習，打造屬於您的獨特網站作品，讓您在前端開發的道路上一馬當先！