Next.js配合NextAuth.js：拯救懒人的认证利器
原创
在做网站或 App 时，身份验证绝对是必不可少的模块。但是，为什么这么多人都觉得它很麻烦呢？因为除了要搞定登录和权限问题外，咱们还得担心数据安全、用户体验……光听着就头大是不是？今天咱们就聊聊，如何利用 Next.js+NextAuth.js，轻松搞定身份验证，轻松省心，告别繁琐。
一、理解身份验证的两种模式：服务端 vs 客户端
先问大家一个问题：当你在网站上点击“登录”时，数据去哪儿了？是直接发给后端处理，还是本地就搞定？这背后其实涉及两种不同的身份验证模式：
- 1. 服务端模式：数据直接发给后端，后端生成 token，再发回给客户端。这种方式安全性强，因为所有逻辑都在服务器处理，数据不会泄露出去。
- 2. 客户端模式：在浏览器本地处理身份验证，更快，但风险也高，适合需要频繁交互的应用。
服务端模式就像去银行存钱，柜员负责所有操作，安全稳妥；而客户端模式就像在家里放存钱罐，方便取用但风险也高。根据不同需求，选择合适的模式才是王道。
二、选择合适的身份验证方法：JWT vs Session
很多朋友在 JWT 和 Session 间纠结。到底哪种更合适呢？这里给大家简单讲一下它们的区别。
- • JWT（JSON Web Token）：加密后存在客户端，每次请求时带上 token。适合前后端分离的项目。
import 'server-only'
import { SignJWT, jwtVerify } from 'jose'
import { SessionPayload } from '@/app/lib/definitions'
const secretKey = process.env.SESSION_SECRET
const encodedKey = new TextEncoder().encode(secretKey)
export async function encrypt(payload: SessionPayload) {
return new SignJWT(payload)
.setProtectedHeader({ alg: 'HS256' })
.setIssuedAt()
.setExpirationTime('7d')
.sign(encodedKey)
}
export async function decrypt(session: string | undefined = '') {
try {
const { payload } = await jwtVerify(session, encodedKey, {
algorithms: ['HS256'],
})
return payload
} catch (error) {
console.log('Failed to verify session')
}
}- • Session：登录信息存在服务器里，客户端只需带上 Session ID。适合需要严格安全管控的系统，比如银行。
import cookies from 'next/headers'
import { db } from '@/app/lib/db'
import { encrypt } from '@/app/lib/session'
export async function createSession(id: number) {
const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
// 1. Create a session in the database
const data = await db
.insert(sessions)
.values({
userId: id,
expiresAt,
})
// Return the session ID
.returning({ id: sessions.id })
const sessionId = data[0].id
// 2. Encrypt the session ID
const session = await encrypt({ sessionId, expiresAt })
// 3. Store the session in cookies for optimistic auth checks
const cookieStore = await cookies()
cookieStore().set('session', session, {
httpOnly: true,
secure: true,
expires: expiresAt,
sameSite: 'lax',
path: '/',
})
}实际建议：一般来说，前后端分离的应用（如 React、Vue）用 JWT，而那些服务端渲染的页面（如 Next.js 的 SSR）推荐 Session。Next.js 默认支持 Session，所以省事省力。
三、NextAuth.js：拯救懒人的认证利器
要搞定身份验证，最简单的方法就是直接用工具。这里推荐一个神器 NextAuth.js，专门为 Next.js 量身定制，支持多种身份验证方式（如 Google、GitHub、邮箱等），并且开箱即用。
import NextAuth from "next-auth";
import Providers from "next-auth/providers";
export default NextAuth({
providers: [
Providers.GitHub({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
],
});用法：只要配置好 clientId 和 clientSecret，一行代码就能完成 GitHub 登录，是不是很香？同时，它还能自动生成 Session，并且支持各种持久化方式，让你少写一大堆逻辑代码。
四、构建自定义身份验证逻辑：用 Next.js API 路由
Next.js 提供了 API 路由，这让我们可以直接在项目中添加后端逻辑。如果你想自定义登录逻辑，比如整合自己的用户数据库（这个强烈建议使用 Prisma），直接在 pages/api 文件夹里新建一个登录 API 即可：
// pages/api/login.js
export default (req, res) => {
const { username, password } = req.body;
// TODO，使用数据库查询，
if (username === "admin" && password === "password") {
res.status(200).json({ message: "登录成功" });
} else {
res.status(401).json({ message: "登录失败" });
}
};在上面的代码中，我们创建了一个简单的登录接口，支持用户名和密码验证。实际应用中可以接入数据库并且配合加密方式（杜绝一切将密码明文存储的脑残行为），以确保安全。
五、实现多种身份验证方案的组合：灵活配置权限
有时候，我们不仅要验证用户身份，还需要根据身份分配权限，比如管理员可以查看后台，普通用户只能访问主页。这时候可以利用 中间件 来动态控制权限。
中间件：Next.js 支持在请求前增加中间件逻辑，我们可以在这里判断用户权限并进行不同操作，保护关键页面。
// middleware.js
export function requireAdmin(req, res, next) {
if (req.user && req.user.role === "admin") {
next();
} else {
res.status(403).json({ message: "无权限访问" });
}
}通过这个中间件，我们可以确保只有管理员才能访问某些页面，这样既提高了安全性，又避免了用户误操作。
一点点思考
身份验证听起来复杂，但通过 Next.js+NextAuth.js，我们可以用简洁的方式解决实际需求。试想一下，几行代码搞定登录，用户体验好，安全性高，简直不要太轻松！还等什么？赶紧试试这些方法，让你的项目更上一层楼！
希望这篇文章对您有所帮助！如有疑问或者宝贵的建议，欢迎留言。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
