在 Nuxt v3 中设置 Supabase 身份验证
原文英文，约800词，阅读约需3分钟。
📝
内容提要
本文讲解如何在Nuxt v3中使用Supabase进行身份验证。步骤包括创建Supabase项目、安装Nuxt包、设置环境变量、使用Pinia实现OTP功能、设计登录表单组件、处理OTP逻辑，并通过中间件保护路由，实现简单的身份验证。
🔎
延伸解读
环境变量的重要性
在使用Supabase进行身份验证时，正确设置环境变量（如SUPABASE_URL和SUPABASE_KEY）至关重要。这些变量确保应用能够安全地连接到Supabase服务，缺少或错误的配置可能导致身份验证失败。
OTP功能的实现
通过Pinia实现OTP功能可以提高用户体验，尤其是在安全性要求较高的应用中。开发者需要注意在Supabase仪表板中修改电子邮件模板，以确保发送的是令牌而非魔术链接，这样才能顺利完成身份验证流程。
路由保护的必要性
使用中间件保护特定路由是确保应用安全的重要措施。未登录用户访问受保护页面时会被重定向到登录页面，这样可以有效防止未授权访问。开发者应根据应用需求合理配置受保护的路由。
❓
Q&A
如何在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 }}。
🏷️
