vue3如何使用Supabase Auth方法

vue3如何使用Supabase Auth方法

在 Vue 3 中使用 Supabase Auth 可以实现用户身份验证功能，包括注册、登录、注销、会话管理等。Supabase 是一个开源的 Firebase 替代品，提供了数据库、身份验证、存储等功能。

以下是 Vue 3 中使用 Supabase Auth 的详细步骤和示例。

1. 安装 Supabase

npm install @supabase/supabase-js

2. 初始化 Supabase 客户端

在项目中初始化 Supabase 客户端，需要提供 Supabase 项目的 URL 和公钥。

// src/utils/supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-supabase-public-key';
export const supabase = createClient(supabaseUrl, supabaseKey);

3. 实现用户注册

使用 supabase.auth.signUp 方法实现用户注册。

<template>
  <div>
    <input v-model="email" placeholder="Email" />
    <input v-model="password" type="password" placeholder="Password" />
    <button @click="signUp">Sign Up</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { supabase } from '@/utils/supabaseClient';

const email = ref('');
const password = ref('');

const signUp = async () => {
  const { user, error } = await supabase.auth.signUp({
    email: email.value,
    password: password.value,
  });

  if (error) {
    console.error('Sign up error:', error.message);
  } else {
    console.log('Signed up:', user);
  }
};
</script>

4. 实现用户登录

使用 supabase.auth.signIn 方法实现用户登录。

<template>
  <div>
    <input v-model="email" placeholder="Email" />
    <input v-model="password" type="password" placeholder="Password" />
    <button @click="signIn">Sign In</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { supabase } from '@/utils/supabaseClient';

const email = ref('');
const password = ref('');

const signIn = async () => {
  const { user, error } = await supabase.auth.signIn({
    email: email.value,
    password: password.value,
  });

  if (error) {
    console.error('Sign in error:', error.message);
  } else {
    console.log('Signed in:', user);
  }
};
</script>

5. 实现用户注销

使用 supabase.auth.signOut 方法实现用户注销。

<template>
  <button @click="signOut">Sign Out</button>
</template>

<script setup>
import { supabase } from '@/utils/supabaseClient';

const signOut = async () => {
  const { error } = await supabase.auth.signOut();

  if (error) {
    console.error('Sign out error:', error.message);
  } else {
    console.log('Signed out');
  }
};
</script>

6. 获取当前用户会话

使用 supabase.auth.session() 获取当前用户的会话信息。

import { supabase } from '@/utils/supabaseClient';

const session = supabase.auth.session();
console.log('Current session:', session);

7. 监听身份验证状态变化

通过 supabase.auth.onAuthStateChange 监听用户身份验证状态的变化。

import { supabase } from '@/utils/supabaseClient';

supabase.auth.onAuthStateChange((event, session) => {
  console.log('Auth state changed:', event, session);
});

8. 保护路由

在 Vue Router 中，可以通过导航守卫保护需要身份验证的路由。

import { createRouter, createWebHistory } from 'vue-router';
import { supabase } from '@/utils/supabaseClient';

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
  const session = supabase.auth.session();

  if (requiresAuth && !session) {
    next('/login');
  } else {
    next();
  }
});

export default router;

总结

在 Vue 3 中使用 Supabase Auth 可以实现以下功能：

• 用户注册：通过 supabase.auth.signUp 实现。

• 用户登录：通过 supabase.auth.signIn 实现。

• 用户注销：通过 supabase.auth.signOut 实现。

• 获取会话：通过 supabase.auth.session() 获取当前用户会话。

• 监听状态：通过 supabase.auth.onAuthStateChange 监听身份验证状态变化。

• 保护路由：通过 Vue Router 的导航守卫保护需要身份验证的路由。

通过 Supabase Auth，可以快速实现用户身份验证功能，提升应用的安全性和用户体验。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github