DEV Community
·
在 Nuxt v3 中设置 Supabase 身份验证
原文英文，约800词，阅读约需3分钟。
📝
内容提要
本文讲解如何在Nuxt v3中使用Supabase进行身份验证。步骤包括创建Supabase项目、安装Nuxt包、设置环境变量、使用Pinia实现OTP功能、设计登录表单组件、处理OTP逻辑，并通过中间件保护路由，实现简单的身份验证。
🎯
关键要点
-
在Nuxt v3中实现身份验证的步骤包括创建Supabase项目和安装Nuxt包。
-
需要设置环境变量，包括SUPABASE_URL和SUPABASE_KEY。
-
使用Pinia实现OTP功能，创建auth.ts文件来处理发送和验证OTP的逻辑。
-
设计登录表单组件LoginForm.vue，处理用户输入的邮箱和OTP。
-
在Supabase仪表板中更改电子邮件模板，以便发送令牌而不是魔术链接。
-
可以添加登出功能，通过signOut方法实现。
-
通过创建中间件保护特定路由，确保未登录用户无法访问受保护的页面。
-
在组件中使用中间件，确保用户在访问受保护路由时进行身份验证。
❓
延伸问答
如何在Nuxt v3中创建Supabase项目？
首先访问Supabase网站，创建一个新的项目。
在Nuxt v3中设置Supabase身份验证需要哪些环境变量？
需要设置SUPABASE_URL和SUPABASE_KEY环境变量。
如何使用Pinia实现OTP功能？
创建auth.ts文件，使用Pinia定义store，并实现sendOtp和verifyOtp方法。
如何设计登录表单组件？
在LoginForm.vue中，使用表单处理用户输入的邮箱和OTP，并根据模式切换显示内容。
如何保护特定路由以防未登录用户访问？
创建中间件auth.ts，检查用户是否登录，并根据情况重定向到登录页面。
如何在Supabase中更改电子邮件模板以发送令牌？
在Supabase仪表板的Authentication -> Email Templates中，修改确认注册和魔术链接模板以使用{{ .Token }}。
🏷️
