NUXT 3带有supabase的身份验证-DEV365 开发者社区

supabase是为我们提供后端功能（例如Postgres数据库，身份验证，边缘功能，存储和实时订阅）等后端功能的开源燃料替代方案。

本教程的兴趣是身份验证部分，我们将学习如何使用supabase进行身份验证NUXT 3应用程序。

要完成本教程中的任务，您需要安装latest LTS version of Node.js。
而且，在本教程中创建的项目的源代码可以在此中获得-GitHub repository。

设置NUXT项目

如果您是NUXT 3的新手，那么getting started with Nuxt 3 tutorial将是一个不错的起点。否则，在您的终端上运行以下脚本以踩下一个新的NUXT项目。

npx nuxi init nuxt3-supabase-auth

上面的脚本将踩踏新的NUXT 3应用程序。进入项目目录-cd nuxt-supabase-auth并创建以下页面和组件。

登录和索引页

删除用安装脚本支架的默认App.vue组件，因为它在此应用程序的设置中没有用。

创建一个/pages目录，并在其中添加3页组件-index.vue，register.vue和login.vue。将以下代码添加到每个相应的页面组件中。

从login.vue组件开始，添加以下代码。

<script setup>
  const credentials = reactive({
    email: '',
    password: '',
  });
</script>

<template>
  <h1>Log in to your account!</h1>
  <form>
    <div>
      <label for="email">Email</label>
      <input type="email" id="email" v-model="credentials.email" />
    </div>
    <div>
      <label for="password">Password</label>
      <input type="password" id="password" v-model="credentials.password" />
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </form>
</template>

至于register.vue组件，添加以下代码。

<script setup>
  const credentials = reactive({
    firstName: '',
    surname: '',
    email: '',
    password: '',
    passwordRepeat: '',
  });
</script>

<template>
  <h1>Create an account!</h1>
  <form>
    <div>
      <label for="first-name">First Name</label>
      <input type="text" id="first-name" v-model="credentials.firstName" />
    </div>
    <div>
      <label for="surname">Surname</label>
      <input type="text" id="surname" v-model="credentials.surname" />
    </div>
    <div>
      <label for="email">Email</label>
      <input type="email" id="email" v-model="credentials.email" />
    </div>
    <div>
      <label for="password">Password</label>
      <input type="password" id="password" v-model="credentials.password" />
    </div>
    <div>
      <label for="password">Repeat Password</label>
      <input
        type="password"
        id="repeat-password"
        v-model="credentials.passwordRepeat"
      />
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </form>
</template>

，最后，对于替换App.vue的index.vue组件作为主页添加以下代码。

<template>
  <h1>Welcome to the dashboard!</h1>
</template>

理想情况下，该应用程序的主页应该被保护免受未经身份验证的访问，含义，所有未经认可的用户都应重定向到登录页面。
为了确保这种行为，我们稍后将创建一个护理人员。

设置Supabase NUXT 3模块

接下来，将supabase集成在NUXT 3项目中。

首先运行以下脚本以安装supabase模块。

npm install -D @nuxtjs/supabase

将supabase模块添加到NUXT项目的配置-nuxt.config.js。

export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase'],
});

supabase nuxt模块使我们可以访问useSupabaseAuthClient，useSupabaseClient和useSupabaseUser客户端vue composables，可用于实现本教程中的目标。

登录NUXT 3应用程序

在login.vue页面内，添加一个login功能，在useSupabaseAuthClient()的帮助下，该功能将设置用户登录逻辑。

// pages/login.vue

const client = useSupabaseAuthClient();
const router = useRouter();
const user = useSupabaseUser();

async function login() {
  const { email, password } = credentials;
  const { error } = await client.auth.signInWithPassword({ email, password });
  if (!error) return router.push('/');
  console.log(error);
}

watchEffect(async () => {
  if (user.value) {
    await router.push('/');
  }
});

每当出现问题时，涉及useSupabaseAuthClient()函数的请求时，始终返回错误对象，否则将其设置为null。

在上述功能中，当用户成功身份验证时，router用于将其重定向到主页。

watchEffect在上述代码中用于检查user对象是否由useSupabaseUser()组合提供。这种组合有助于自动象征NUXT应用程序中各地身份验证的Supabase user。如果由于成功登录而获得了用户，则应用程序将重定向到主页-/。

将用户注册到NUXT 3应用程序中

在register.vue页面中，添加一个register()功能，该功能在提供的表单中提交注册用户的详细信息。注册函数的代码如下。

// pages/register.vue

const client = useSupabaseAuthClient();

async function register() {
  const { firstName, surname, email, password, passwordRepeat } = credentials;
  if (password !== passwordRepeat) return;
  const { error } = await client.auth.signUp({
    email,
    password,
    options: {
      data: {
        first_name: firstName,
        surname,
        email,
      },
      emailRedirectTo: 'http://localhost:3000/login',
    },
  });
  if (error) {
    alert('Something went wrong !');
    return;
  }
  alert('Open the email we sent you to verify your account!');
}

正如先前使用signInWithPassword()函数所示的，useSupabaseAuthClient() composable还可以访问signUp函数，该函数采用一些最重要的参数是注册用户的email和password。

在此示例中，还传递了一个options对象，该对象启用了注册用户收到的帐户验证电子邮件中发送的重定向URL -emailRedirectTo的规范。
数据选项指定有关正在提交的注册用户以及身份验证凭据的额外信息，在这种情况下，firstName和surname。

到目前为止，该应用程序尚不正常，因为尚未提供NUXT模块所需的Supabase项目凭据，这将在创建Supabase项目后完成。

将未经验证的用户拒之门外

在创建一个Supabase项目之前，上面讨论的该应用程序的重要部分是根据未经授权的访问来保护主页。可以通过使用route middleware来实现这一点。
通过创建一个/middleware根文件夹并在其中添加auth.js文件来设置一个。在此文件中添加以下代码。

// middleware/auth.js
export default defineNuxtRouteMiddleware((to, _from) => {
  const user = userSupabaseUser();

  if (!user.value) {
    return navigateTo('/login');
  }
});

上述路线中间件可确保将其应用于的未经授权的会话重定向到/login页。

要将中间件应用于页面，在这种情况下，主页需要添加以下代码。

// pages/index.vue

definePageMeta({
  middleware: 'auth',
});

记录用户

要将用户登录NUXT应用程序，需要调用useSupabaseAuthClient()的logOut()函数。

创建一个/components根目录，并在其中添加一个带有以下代码的Navbar.vue组件。

// components/Navbar.vue

<script setup>
  const client = useSupabaseAuthClient();
  const user = useSupabaseUser();
  const router = useRouter();

  async function logOut() {
    const { error } = await client.auth.signOut();
    if (error) return;
    await router.push('/login');
  }
</script>

<template>
  <nav>
    <div>
      <button v-if="user" @click="logOut()">Log Out</button>
    </div>
    <div>
      <NuxtLink v-if="!user" to="/login">Login</NuxtLink>
    </div>
    <div>
      <NuxtLink v-if="!user" to="/register">Register</NuxtLink>
    </div>
  </nav>
</template>

在此组件中，当未对用户进行身份验证时，/login和/register路线将暴露，否则显示了Log Out按钮。

Log Out按钮调用logOut()函数，该函数将用户登录并将应用程序重定向到/login页。

要将UI的所有部分放在一起，请通过添加/layouts root文件夹并添加default.vue组件来创建默认布局组件，并在其中添加以下代码。

<template>
  <Navbar></Navbar>
  <slot></slot>
</template>

现在，根据应用程序的身份验证状态。

为NUXT 3应用程序设置supabase

本教程的第二部分涉及创建一个supabase项目。
首先，为此，create a Supabase account。

创建帐户并完成身份验证过程后，您将最终进入Supabase仪表板。创建一个新组织，然后是一个新项目。

创建了项目后，程序页面介绍了其详细信息，其中其中的URL和key：anon public。

在NUXT应用程序的根部创建一个.env文件，在其中声明SUPABASE_URL和SUPABASE_KEY环境变量，然后用新的supabase项目创建后获得的值填充它们。

在supabase中设置身份验证

supabase在设置用户身份验证方面提供了很多选择。可以通过使用Supabase的身份验证支持的各种提供商对用户进行身份验证。

可以通过在supabase仪表板中转到Authentication > Providers来查看上述提供商的选择。

默认情况下，如上图所示，启用了电子邮件提供商。本教程的重点是将用户身份验证到使用电子邮件方法创建的NUXT应用程序中，因此在此不得更改。

supabase身份验证凭证表

supabase将身份验证表与其他数据表分开。在用户注册的情况下，身份验证凭证位于仪表板的身份验证部分的users表中。由于没有注册用户，因此应如下所示。

。

可以以图形方式创建Supabase仪表板，表格和其他元素，也可以使用SQL编辑器内的SQL脚本。

除了将在此演示应用中存储在users表中的用户身份验证凭证外，还需要存储其他用户数据，例如注册用户的第一个和姓氏。为此，需要创建一个表格，以保存此额外的数据。

粘贴并在SQL编辑器内运行以下SQL脚本以创建一些表，功能和触发器。

create table profiles (
  id uuid references auth.users on delete cascade not null primary key,
  updated_at timestamp with time zone,
  email text,
  first_name text,
  surname text
);
create function public.handle_new_registration()
returns trigger as $$
begin
  insert into public.profiles (id, email, first_name, surname)
  values (new.id, new.raw_user_meta_data->>'email', new.raw_user_meta_data->>'first_name', new.raw_user_meta_data->>'surname');
  return new;
end;
$$ language plpgsql security definer;
create trigger on_new_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_registration();

将在上述SQL脚本的第一部分中创建上面讨论的用户数据的profiles表。从create function到$$ language plpgsql; a a Postgres function，每当创建用plpgsql编写的新用户时，都会在profiles表中创建新记录。
最后，与身份验证相关的trigger -users表，每当还会添加新记录时调用上面的函数。

数据库函数中的raw_user_meta_data传递的数据是从“ data”选项中的“注册”函数中创建的“ data”选项中获得的，pages/register.vue。

现在，当注册新用户时，将创建一个新的profiles表记录，其中包含fist_name，surname和surname和email，并在注册表单中提供。

。

概括

要总结本教程，我们已经了解了以下内容：

使用路线中间Wares在NUXT 3中守卫页面
将模块添加到NUXT 3应用程序
设置并使用supabase nuxt 3模块
使用supabase模块提供的合成件来验证用户进出nuxt 3 app
创建Supabase项目并集成到NUXT 3应用程序

要了解有关NUXT 3和Supabase的更多信息，您可以参考其各自的文档：