Next.js配合NextAuth.js：拯救懒人的认证利器

在做网站或 App 时，身份验证绝对是必不可少的模块。但是，为什么这么多人都觉得它很麻烦呢？因为除了要搞定登录和权限问题外，咱们还得担心数据安全、用户体验......光听着就头大是不是？今天咱们就聊聊，如何利用 Next.js+NextAuth.js，轻松搞定身份验证，轻松省心，告别繁琐。

一、理解身份验证的两种模式：服务端 vs 客户端

先问大家一个问题：当你在网站上点击"登录"时，数据去哪儿了？是直接发给后端处理，还是本地就搞定？这背后其实涉及两种不同的身份验证模式：

1. 服务端模式：数据直接发给后端，后端生成 token，再发回给客户端。这种方式安全性强，因为所有逻辑都在服务器处理，数据不会泄露出去。
1. 客户端模式：在浏览器本地处理身份验证，更快，但风险也高，适合需要频繁交互的应用。

服务端模式就像去银行存钱，柜员负责所有操作，安全稳妥；而客户端模式就像在家里放存钱罐，方便取用但风险也高。根据不同需求，选择合适的模式才是王道。

二、选择合适的身份验证方法：JWT vs Session

很多朋友在 JWT 和 Session 间纠结。到底哪种更合适呢？这里给大家简单讲一下它们的区别。

• JWT（JSON Web Token） ：加密后存在客户端，每次请求时带上 token。适合前后端分离的项目。

javascript 复制代码

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。适合需要严格安全管控的系统，比如银行。

javascript 复制代码

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、邮箱等），并且开箱即用。

arduino 复制代码

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 即可：

dart 复制代码

// 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 支持在请求前增加中间件逻辑，我们可以在这里判断用户权限并进行不同操作，保护关键页面。

scss 复制代码

// 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，我们可以用简洁的方式解决实际需求。试想一下，几行代码搞定登录，用户体验好，安全性高，简直不要太轻松！还等什么？赶紧试试这些方法，让你的项目更上一层楼！

希望这篇文章对您有所帮助！如有疑问或者宝贵的建议，欢迎留言。