Next.js 常见鉴权方案

发布时间:2026/8/25 10:26:28
Next.js 常见鉴权方案 文章目录一、 常见鉴权方案1. 基于 Cookie / Session推荐用于网站登录2. 基于 JWT适合前后端分离 / 移动端 / API 服务3. API Key适合服务端 API 调用比如 AI 模型接口二、基于JWT认证的案例1. 安装依赖2. 添加登录接口 app/api/auth/login/route.js3. 保护 /api/users一、 常见鉴权方案在Next.js (App Router)里常见的鉴权方式有三类1. 基于 Cookie / Session推荐用于网站登录用户登录时验证用户名/密码 → 生成 Session写到数据库或 Redis。通过Set-Cookie返回给浏览器。后续请求时浏览器会自动带上 CookieAPI 路由里解析 Cookie 并校验。 工具next-auth最常见支持 OAuth、邮箱登录、JWT 等自己实现用cookies()API MySQL 存 Session2. 基于 JWT适合前后端分离 / 移动端 / API 服务登录时生成JWT Token包含用户 ID 等信息签名保证不被篡改。客户端保存到localStorage或httpOnly Cookie。每次请求时在Authorization头里带上Authorization: Bearer tokenAPI 路由里校验 Token 是否有效。 工具jsonwebtoken库可以配合middleware.js在全局做保护3. API Key适合服务端 API 调用比如 AI 模型接口给每个用户分配一个 API Key存 MySQL。客户端请求时带上Authorization: Bearer API_KEY后端校验 Key 是否存在 权限是否足够。二、基于JWT认证的案例下面是一个在Next.js项目中基于JWT保护/api/users接口的案例。1. 安装依赖pnpminstalljsonwebtoken bcryptjs2. 添加登录接口app/api/auth/login/route.jsimportpoolfrom/lib/db;importjwtfromjsonwebtoken;importbcryptfrombcryptjs;constSECRETprocess.env.JWT_SECRET||mysecret;// 应放到 .env 文件exportasyncfunctionPOST(req){try{const{email,password}awaitreq.json();const[rows]awaitpool.query(SELECT * FROM users WHERE email ?,[email]);if(rows.length0){returnnewResponse(JSON.stringify({error:用户不存在}),{status:401});}constuserrows[0];constvalidawaitbcrypt.compare(password,user.password);if(!valid){returnnewResponse(JSON.stringify({error:密码错误}),{status:401});}// 生成 JWTconsttokenjwt.sign({id:user.id,email:user.email},SECRET,{expiresIn:1h});returnnewResponse(JSON.stringify({token}),{status:200,headers:{Content-Type:application/json}});}catch(error){returnnewResponse(JSON.stringify({error:error.message}),{status:500});}}调用之后返回的token是一个字符串类似eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiZW1haWwiOiJ0ZXN0QHRlc3QuY29tIiwiaWF0IjoxNzI2NjY3NjQyLCJleHAiOjE3MjY2NzE2NDN9.1234567890abcdef1234567890abcdef。如图所示3. 保护/api/users在app/api/users/route.js里加Token 校验importpoolfrom/lib/db;importjwtfromjsonwebtoken;constSECRETprocess.env.JWT_SECRET||mysecret;// 校验函数asyncfunctionauthenticate(req){constauthHeaderreq.headers.get(authorization);if(!authHeader||!authHeader.startsWith(Bearer ))returnnull;consttokenauthHeader.split( )[1];try{returnjwt.verify(token,SECRET);// 返回用户信息}catch(err){returnnull;}}exportasyncfunctionGET(req){constuserawaitauthenticate(req);if(!user){returnnewResponse(JSON.stringify({error:未授权}),{status:401});}const[rows]awaitpool.query(SELECT * FROM users);returnnewResponse(JSON.stringify(rows),{status:200,headers:{Content-Type:application/json}});}现在访问/api/users必须带上正确的 JWTAuthorization: Bearer token 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目