Supabase的用戶管理系統by API

supabase-js文件

快速上手文件

完整文件

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

• Supabase的JavaScript Client Library串接實作

AUTH(會員管理)實作

註冊實作

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
}

登入實作

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介紹

登出實作

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

維持登入狀態

<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>

總結

有興趣的內容

• Zeabur：一個讓您的服務部署變得輕而易舉的平台，無論您使用何種程式語言或開發框架，都能快速上手，釋放您的創造力！
• 六角學院的Vue直播班課程：掌握Vue 3的神秘面紗，透過專業指導和實戰練習，打造屬於您的獨特網站作品，讓您在前端開發的道路上一馬當先！