Next.js 的认证之旅：从零开始到中间件的巅峰

嘿，老铁们，今天聊聊在 Next.js 上搞认证和中间件到底怎么玩。

说实话，一开始我以为这玩意儿像写个表单那么简单，结果发现背后有一堆套路。

别担心，我把过程拆成几个小块，让你kan得清清楚楚。

1️⃣ 打开门：为什么要用 NextAuth？

先说个大道理：Ru果你想快速集成 GitHub、Google 等 OAuth，或者自定义邮箱密码登录，NextAuth 是首选。

它Yi经把 session、token、CSRF 全部塞进了一个大盒子里。

我以前自己写过一次完整的 JWT 方案，结果被坑得半死，后来改用 NextAuth 后就轻松多了。

2️⃣ 代码快照：auth.ts 基础配置

// auth.ts
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
import Google from 'next-auth/providers/google';
import Credentials from 'next-auth/providers/credentials';
import { db } from '@/lib/db';
import bcrypt from 'bcryptjs';
import type { DefaultSession } from 'next-auth';
// 
 Session 类型
declare module 'next-auth' {
  interface Session {
    user: {
      id: string;
      role: string;
    } & DefaultSession;
  }
}
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: ,
  session:{ strategy:'jwt', maxAge:* * * ,},
  pages:{
    signIn:'/login',
    signOut:'/logout',
    error:'/auth/error',
  },
  callbacks:{
    async jwt{ if{ token.id=user.id; token.role=user.role;}return token;}
    async session{if{ session.user.id=token.id as string; session.user.role=token.role as string;}return session;}
  },
});

你kan，只要往 providers 数组里塞进去对应的 provider 就Neng搞定登录流程。

NEXT_AUTH 自动帮你生成路由 /api/auth/ 用来处理登录请求。

Ru果想自定义 UI，就在 pages/login 页面里写表单，然后调用 signIn 函数即可。哈哈，省事得hen！

3️⃣ 会话细节：JWT 与 Cookie 的碰撞

先说一句话：不要把 token 存在 localStorage。那样 XSS 攻击家伙Ke以拿走 Token，然后直接篡改权限。

Cookie 的 HttpOnly 标记让 JavaScript 无法访问，从而大幅降低 XSS 成功率。

下面给你一个手写 Cookie + JWT 的例子，你Ke以根据需求自行调整。

// lib/session.ts
import { SignJWT , jwtVerify } from 'jose';
import { cookies } from 'next/headers';
const SECRET_KEY = new TextEncoder.encode;
export async function createSession:Promise{
 const token=await new SignJWT
 .setProtectedHeader
 .setIssuedAt
 .setExpirationTime
 .sign;
 const cookieStore=await cookies;
 cookieStore.set('session',token,{
   httpOnly:true,
   secure:true,
   sameSite:'lax',
   maxAge:* * *,
   path:'/',
 });
}
export async function getSession:Promise<{userId:string ;role:string} |null>{
 const cookieStore=await cookies;
 const token=cookieStore.get?.value;
 ifreturn null;
 try{
   const{payload}=await jwtVerify;
   return payload as {userId:string ;role:string};
 }catch{
   console.error;
   return null;
 }
}
export async function deleteSession:Promise{
 const cookieStore=await cookies;
 cookieStore.delete;
}

"那个那个"，别忘了把 maxAge 写成秒数，比如一天就是86400秒。哈哈！

"不对不对，要改成天数？"——不是啦，用秒geng精确一点。

4️⃣ 密码哈希——别让明文跑出去

import bcrypt from 'bcryptjs';
// 注册时：哈希密码
const saltRounds=12; // - 为合理范围
const hashedPassword=await bcrypt.hash;
await db.users.create;
 // 登录时：验证密码
const isValid=await bcrypt.compare;
if{throw new Error;}

"绝对禁止明文存储"，即便数据库泄露也没事。因为哈希不可逆嘛！

5️⃣ 中间件来守护路由：auth 自动化上阵

// middleware.ts
import { auth } from '@/auth';
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export default auth=>{
 const nextUrl=req.nextUrl;
 const session=req.auth;
 const isLoggedIn=!!session?.user;
 const protectedRoutes=;
 const isProtectedRoute=protectedRoutes.some);
 if{
   const redirectUrl=new URL;
   redirectUrl.searchParams.set;
   return NextResponse.redirect;
 }
 if){
   return NextResponse.redirect);
 }
 return NextResponse.next;
});
export const config={ matcher:,};

"咱就是说这段代码可不是随便写的。" 它利用 Edge Runtime 在请求到达路由前就拦截判断，大大提升性Neng。

"还有一点要记得，那就是 config.matcher 要排除静态文件，否则会卡住页面加载。" 哈哈。 BASIC RBAC 示例

// middleware.ts
import { auth } from '@/auth';
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export default auth=>{
const nextUrl=req.nextUrl;
const session=req.auth;
const userRole=session?.user?.role;
if){
 if return NextResponse.redirect);
 if return NextResponse.redirect);
}
if){
 if return NextResponse.redirect);
 const allowedRoles=;
 if) 
     return NextResponse.redirect);
}
return NextResponse.next;
});
export const config={ matcher:,};

"那边的路还挺长，但只要记住每次判断dou要先检查登录状态，再检查权限就行。"

"说实话，我第一次没想到需要这么多层判断，以为只要有用户就 OK。" 哈哈哈。 6️⃣ 客户端组件里的 Session 调用方式

/* components/UserMenu.tsx */
'use client';
import { useSession ,signOut}from'next-auth/react';
export function UserMenu{
const{data:sess,status}=useSession;
if{
 return;
}
if{
 return;
}
return(

{sess.user.image&&(

)}
{sess.user.name}
signOut}>退出
);
}

"这段代码太简洁了吧？"

"对呀，就是让前端Neng随时知道用户是否Yi登录，还有权限角色。"

"而且只需在根布局包裹一次 SessionProvider 就够了。"

- RootLayout 示例：

// app/layout.tsx
import{SessionProvider}from'next-auth/react';
export default async function RootLayout{ 
const session=await auth; 
return (

{children}
);
}

7️⃣ 手动实现 JWT 的深度剖析

"虽然 Auth.js Yi经足够强大，但有时候你还是想自己掌控每一步，尤其是跨平台系统的统一身份认证。"

- 对接Yi有后端 API，只需验证 Token 并读取 Payload 即可；

- 学习底层原理geng容易发现安全漏洞；

- 可自由配置 refresh-token、黑名单等高级特性； #rate-limit 示例#️️️️️️️️️️️️⚙️⚙️⚙️⚙️⚙️⚙️⚙︎ ⚙︎ ⚙︎ ⚙︎ ⚙︎ ⚙︎ ⚙︎ ⚙︎ ⚙︎ ⚙︎ #🔒🔒🔒🔒# 🔐🔐🔐🔐# 🔑 🔑 🔑 🔑 #👾👾👾👾👾 👾 👾 👾 👾 👾 👾 👾 👾 🧠 🧠 🧠 🧠 🧠🧠🧠🧠🧠🧠🧠🧠🧠🧰🛡‍💻💬💬💬💬 💡💡💡💡 💭🤔🤔🤔🤔 🤷‍♂ 🤷‍♂ 🤷‍♀ 🤷‍♀ 📚📚📚📚 📖📖📖📖 📞📞☎☎☎ ☕🍵🍵🍵 🍺🥤🥤🥤 🍹🍸🍹🍸 🍰🎂🍰🎂 🎁🎉🎉🎉 🎀✨✨✨ ✨✨✨✨ ✨✨✨✨ ✨🌈🌈🌈🌈 🌟⭐⭐⭐ ⭐⭐ ⭐⭐ ⭐⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐⭐ ⭐⭐⭐⭐✌✌✌✌✌✌✌✌✌ ✂剪刀剪刀剪刀剪刀 剪刀剪刀剪刀 剪刀剪刀剪刀 剪刀剪刀 剪切切切 切切切 切切切 切切 切 切切 ✏笔笔笔 笔笔笔 笔笔笔 笔笔 笔笔 笔 笔 ✔✔✔✔✔ ✔✔✔ ✔✔ ✔ ✔✔ ✔✔ ✔✔✓✓✓✓✓✓ ✓✓✓ ✓✓ ✓ ✓✓ ✓' ### Rate‑Limit 配置示例 ts // lib/rate-limit.ts import{Redis}from '@upstash/redis'; const redis=new Redis; const MAX_ATTEMPTS=5 ; const LOCKOUT_DURATION=* * * ; export async function checkRateLimit:Promise<{allowed:boolean ;remainingAttempts?:number ;lockoutUntil?:Date;}>{ const key=`login_attempts:${email}`; const attempts=)||0 ; if{ const ttl=)||0 ; return{allowed:false ,lockoutUntil:new Date+ttl*1000)}; } return{allowed:true ,remainingAttempts:}; } export async function recordFailedAttempt:Promise<void>{ const key=`login_attempts:${email}` ; await redis.incr; await redis.expire; } export async function resetLoginAttempts:Promise<void>{ const key=`login_attempts:${email}` ; await redis.del; }

- Ru果尝试次数超过限制，就会返回 lockoutUntil，让前端提示“稍后再试”。;

- 每次失败后dou记录一次并设置过期时间，保证不会无限制累积；;

# CSRF 防护 # 🚫🚫🚫🚫🚫🚫 🚀🚀🚀 🚓 🚓 🚓 🚓 🚓 🚓 🚗🚗🚗🚗🚗 #🌐🌐🌐 🌍 🌎 🌏 🌍 🌎 🌏 🌎 🌍 🌎 #🏴🏳🏁🏴 #🇨🇳 🇨🇳 🇨🇳 🇨🇳 🇨🇳 🇨🇳 🇨🇳 🇨🇳 # ### CSRF Token 简易实现 ts // csrf.ts import { randomBytes }from'crypto'; export function generateCsrfToken:string{return randomBytes.toString;} export function verifyCsrfToken:boolean{ return tokenFromCookie===tokenFromBody ; }

- 前端在表单提交时把 Cookie 中的 CSRF Token 一并提交；;

- 后端收到请求后比对两者是否相同，Ru果不同直接拒绝；;

8️⃣ 小结 & 建议 👉🏼👉🏼👉🏼👉🏼👌🏼👌🏼👌🏼👌🏼👏🏼👏🏼👏🏼👏🏼🙋🏻🙋🏻🙋🏻🙋🏻 🙊🙊🙊🙊🙊 🙈🙈🙈🙈🙈 🙃🙃🙃 🙄 🙄 😕 😕 😢 😢 😤😤😤😤😥😥😦😦😣😣😭😭😭😭🤯🤯🤯🤯🔥🔥🔥🔥❄❄❄❄❗❗❗ ❕❕ ❕❕ ❆ ❆ ❓ ❓ 🔮 🔮"

- 对于新手推荐直接使用 Auth.js，因为它几乎Ke以解决所有常见需求；;

* - 想深入掌握身份认证机制的人Ke以自己实现 JWT + Cookie，再加上 rate‑limit 与 CSRF 防护；;

* - 无论哪条路线，dou一定记得使用 HTTPS、HttpOnly 和 SameSite=lax 或 strict；;

* - 在生产环境务必把 SECRET_KEY 换成真正随机且长度足够长的字符串，不然容易被暴力破解。;温馨提醒：

    - 本教程中所有环境变量名仅Zuo演示，请自行替换为真实值。;

*     - 所有路径均为示例路径，请按项目结构调整。;

*     - Ru果遇到任何报错，可先检查 Node / TypeScript 配置是否正常。;

祝你编码愉快，也祝你的项目安全稳健~ 😉👍🏻❤️❤️❤️❤️❤️❤️❤️❤️❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ 💖💖💖 💝 💝 💝 💝 💝 💝 💝 💞💞💞 💟💟💟　　— 老友永远陪着你!

---