DEV Community
·
使用App Router和中间件的Next.js 15身份验证
💡
原文英文，约1400词，阅读约需5分钟。
📝
内容提要
本文介绍了如何在Next.js 15中使用App Router、middleware和NextAuth.js进行身份验证，包括文件结构、身份验证配置、类型定义和中间件实现，以确保安全的用户登录、JWT令牌刷新和会话管理。
🎯
关键要点
- 本文介绍了如何在Next.js 15中使用App Router、middleware和NextAuth.js进行身份验证。
- 文件结构包括auth、dashboard、api、middleware和lib等目录。
- 身份验证设置在/app/api/auth/[...nextauth]/route.ts中，使用从/lib/auth.ts导入的处理程序。
- 身份验证配置在/lib/auth.ts中，定义了NextAuth选项，包括凭证提供者、JWT/会话回调和错误处理。
- 类型定义在/lib/next-auth.d.ts中，扩展了NextAuth类型以包括自定义用户数据。
- 中间件在/middleware/middleware.ts中实现，保护私有路由并检查用户是否经过身份验证。
- 会话提供者在/app/provider.tsx中实现，使会话数据在所有客户端组件中可访问。
- 根布局在/app/layout.tsx中设置，包含全局提供者和应用程序的基础结构。
- 客户端组件示例使用useSession钩子获取和显示用户会话数据。
- 服务器组件示例使用auth()获取会话，未认证用户重定向到登录页面。
- 关键特性包括凭证身份验证、令牌刷新、受保护路由、类型安全和会话访问。
- 实现注意事项包括正确配置环境变量，特别是NEXTAUTH_SECRET。
❓
延伸问答
如何在Next.js 15中设置身份验证？
在Next.js 15中，可以使用App Router、middleware和NextAuth.js进行身份验证，具体步骤包括配置文件结构、身份验证设置和中间件实现。
NextAuth.js的身份验证配置包含哪些选项？
NextAuth.js的身份验证配置包括凭证提供者、JWT/会话回调、令牌刷新逻辑和错误处理等选项。
如何保护私有路由？
通过在middleware中检查用户的身份验证状态，如果没有有效的令牌，则重定向到登录页面，从而保护私有路由。
如何在客户端组件中访问会话数据？
可以使用useSession钩子在客户端组件中获取和显示用户的会话数据。
Next.js 15中如何实现令牌刷新？
在JWT回调中检查访问令牌的过期时间，如果过期则使用refreshToken请求新的访问令牌。
在NextAuth.js中如何处理错误？
在身份验证配置中，可以通过捕获异常并返回错误信息来处理登录和令牌刷新的错误。
🏷️
标签
➡️
