您现在的位置是：网站首页> 编程资料编程资料
Vue3中使用Supabase Auth方法详解_vue.js_
2023-05-24
306人已围观
简介 Vue3中使用Supabase Auth方法详解_vue.js_
引言
Supabase是一个自称的 "开源Firebase替代品"。我对与Supbase合作已经有一段时间了，我想我将尝试使用他们的认证API来为Vue.js 3应用程序进行认证设置。
首先，你为什么要使用Supabase Auth？最重要的是，如果你使用Supabase作为你的数据存储，（它有一些非常甜蜜的好处），Supabase Auth是你可以管理对这些数据的访问的唯一方法。其次，虽然Supabase Auth也有许多不同的功能。
- 没有中间件的用户权限（通过Postgres的行级安全）。
- 神奇的电子邮件链接
- 社交提供者的登录
- 以及所有其他你期望的封装在一个简单的JavaScript SDK中的Auth功能
综上所述，值得一提的是，Supabase Auth不是一个独立的认证提供商，它只是为了与其他Supabase服务（数据、存储等）一起使用。
好了，让我们开始在我们的Vue.js 3应用程序中实施Supabase Auth。
安装Supabase
我假设你已经有了一个用Vue Router设置的Vue.js 3应用程序，如果没有，你可以下载这个模板代码来进行操作。我还假设你已经有了一个Supabase账户和项目设置。如果没有，你可以前往supabase.io，它将引导你完成第一步。
然后，为了与Supabase auth以及它的任何其他服务合作，我们需要安装Supabase JavaScript SDK。
npm install @supabase/supabase-js
设置Supabase
安装完Supabase后，我们需要经过几个步骤来设置它。我将创建一个名为UseSupabase.js 的组合，用来组织这个设置。
// UseSupabase.js import { createClient } from "@supabase/supabase-js"; // these can come from an environment variable if desired // not required however as they are 100% exposed on the client side anyway // and that's ok, Supabase expects this (security is provided by Row Level Security) const supabaseUrl = ""; const supabaseKey = ""; // setup client const supabase = createClient(supabaseUrl, supabaseKey); // expose supabase client export default function useSupabase() { return { supabase }; } supabaseUrl和supabaseKey可以在Supabase仪表板上的Settings > API 。
当你在Supabase界面时，你也可以到Autentication > Settings ，设置你的网站网址，以便Supabase知道如何正确地重定向确认邮件等。它的默认值是localhost:3000，但你可以根据需要进行修改。
创建一个AuthUser组合
设置好Supabase SDK后，我们现在可以开始使用它了。首先，我将创建一个AuthUser组合，以抽象出与AuthUser的一些交互，并存留所有我们需要填写的方法。这在我们将来想脱离Supabase时很有帮助，并帮助我们把所有的AuthUser功能集中到一个地方。
import { ref } from "vue"; // user is set outside of the useAuthUser function // so that it will act as global state and always refer to a single user const user = ref(null); export default function useAuthUser() { /** * Login with email and password */ const login = async ({ email, password }) => {}; /** * Login with google, github, etc */ const loginWithSocialProvider = (provider) => {}; /** * Logout */ const logout = async () => {}; /** * Check if the user is logged in or not */ const isLoggedIn = () => {}; /** * Register */ const register = async ({ email, password, ...meta }) => {}; /** * Update user email, password, or meta data */ const update = async (data) => {}; /** * Send user an email to reset their password * (ie. support "Forgot Password?") */ const sendPasswordRestEmail = async (email) => {}; return { user, login, loginWithSocialProvider, isLoggedIn, logout, register, update, sendPasswordRestEmail, maybeHandleEmailConfirmation, }; } 创建页面
接下来，让我们来创建典型用户认证流程所需的页面。我使用Tailwind CSS做了一些样式设计，但可以根据你的需要自由调整这些样式。
注册.vue
我们需要的第一个页面是一个注册页面。它需要包含必要的字段，以便在Supabase中创建一个用户。这些字段是电子邮件和密码。我们也可以在Supabase中为我们的用户添加任意的元数据，这意味着我们也可以让用户的真实姓名成为注册的一部分。
// Register.vue
在脚本部分，我们可以使用一个反应式引用来跟上表单的数据，同时提供一个函数来处理表单的提交。在表单提交时，我们将从AuthUser组合中调用注册函数（它仍然是空的，但我们将在稍后用supabase的具体调用来填充它），然后重定向到一个页面，指示用户检查他们的电子邮件以确认注册。
// Register.vue ...
最后，我们需要为该页面注册路由。
// router/index.js const routes = [ //... { name: "Register", path: "/register", component: () => import("@/pages/Register.vue"), }, ] 如果你使用了模板代码，访问/register ，应该会得到一个看起来像这样的页面。
EmailConfirmation.vue
既然我们在注册后重定向到一个EmailConfirmation页面，我们当然需要让它存在。它将只是一个简单的模板和一条信息。当我们在上面重定向时，我们也提供了来自注册表单的电子邮件作为一个查询变量，所以我们可以在这里显示它。
Thanks for registering!
Please confirm your email to finishing registering: {{ $route.query.email }}
再一次，我们也需要注册这个路由。
// router/index.js const routes = [ //... { name: "EmailConfirmation", path: "/email-confirmation", component: () => import("@/pages/EmailConfirmation.vue"), }, ] 现在访问带有电子邮件查询变量的/email-confirmation 路由将看起来像这样。
登录.vu
在注册并确认了他们的电子邮件后，用户将不得不登录。让我们接下来创建这个页面。
该模板将包括一个带有电子邮件和密码字段的表单，以及一个指向忘记密码页面的链接，还有一个处理Github登录的链接。
在脚本部分，我们可以创建一个反应式引用来跟上表单的值，以及一个函数来处理表单的提交。
...
注册完路由后，你可以访问/login 路由，看到一个漂亮的登录表单。
// router/index.js const routes = [ //... { name: "Login", path: "/login", component: () => import("@/pages/Login.vue"), }, ] ForgotPassword.vue
由于我们在上面实现了一个忘记密码的链接，让我们也把这个页面用脚手架搭出来。
在模板中，我们只需要一个带有单个电子邮件字段的表单，以便收集我们应该发送重置链接的电子邮件。
在脚本部分，我们将创建一个电子邮件反应式参考，以跟上表单中的电子邮件输入，并定义一个函数，在表单提交时调用AuthUser可组合的sendPasswordRestEmail 函数。