介绍

在这篇文章中，我们将学习如何在C-Shopping电商开源项目中，基于Next.js 14，处理所有API路由中添加身份验证和错误处理中间件的思路与实现。

这篇文章中的代码片段取自我最近开源项目C-Shopping，完整的项目和文档可在https://github.com/huanghanzhilian/c-shopping地址查看。

Next.js中的API路由

在Next.js14中，/app/api 文件夹包含所有基于文件名路由的api接口

例如文件 /app/api/user/route.js 会自动映射到路由 /api/user。API路由处理程序导出一个默认函数，该函数传递给HTTP请求处理程序。

有关Next.js API路由的更多信息，请参阅 https://nextjs.org/docs/app/building-your-application/routing/route-handlers。

官方示例Next.js API 路由处理程序

下面是一个API路由处理程序的基本示例，它将用户列表返回给HTTP GET请求。

只需要导出一个支持HTTP协议名称，再返回一个Response，就完成了一个API

export async function GET() {
  const res = await fetch('https://data.mongodb-api.com/...', {
    headers: {
      'Content-Type': 'application/json',
      'API-Key': process.env.DATA_API_KEY,
    },
  })
  const data = await res.json()
 
  return Response.json({ data })
}

Next.js 自定义编码设计 API处理器

我们会发现，如果按照官方的文档来写API，虽然简单，但是毫无设计感，当面对复杂项目时候很多引用会重复出现，我们需要设计一些中间间，来帮助我们更好的扩展API编码。

为了增加对中间件的支持，我创建了apiHandler包装器函数，该包装器接受一个API处理程序对象，并返回一个HTTP方法(例如GET， POST， PUT， DELETE等)，再到route文件导出该API，这样就既简单又高效的做好了基础的编码设计。

通过apiHandler包装器函数，再扩展了jwtMiddleware、identityMiddleware、validateMiddleware、errorHandler，来更好的设计优化代码：

• jwtMiddleware（处理JWT校验）；
• identityMiddleware（处理身份校验）；
• validateMiddleware（处理 joi，字段校验）；
• errorHandler（全局处理异常）。

项目中的路径 /helpers/api/api-handler.js

import { NextRequest, NextResponse } from 'next/server'

import { errorHandler, jwtMiddleware, validateMiddleware, identityMiddleware } from '.'

export { apiHandler }

function isPublicPath(req) {
  // public routes that don't require authentication
  const publicPaths = ['POST:/api/auth/login', 'POST:/api/auth/logout', 'POST:/api/auth/register']
  return publicPaths.includes(`${req.method}:${req.nextUrl.pathname}`)
}

function apiHandler(handler, { identity, schema, isJwt } = {}) {
  return async (req, ...args) => {
    try {
      if (!isPublicPath(req)) {
        // global middleware
        await jwtMiddleware(req, isJwt)
        await identityMiddleware(req, identity, isJwt)
        await validateMiddleware(req, schema)
      }
      // route handler
      const responseBody = await handler(req, ...args)
      return NextResponse.json(responseBody || {})
    } catch (err) {
      console.log('global error handler', err)
      // global error handler
      return errorHandler(err)
    }
  }
}

users [id] API路由处理程序

下面代码我们可以看到，使用了apiHandler包装器

• 第一个参数是当前HTTP请求的核心逻辑，解析body、query、params，查询数据，最后通过统一的setJson返回数据结构
• 第二个参数是一个对象，里面包含了一些中间层扩展参数逻辑，isJwt是否需要JWT校验、schema需要校验的字段和类型、identity操作的用户是否符合权限等。

项目中的路径 /app/api/user/[id]/route.js

import joi from 'joi'

import { usersRepo, apiHandler, setJson } from '@helpers'

const updateRole = apiHandler(
  async (req, { params }) => {
    const { id } = params
    const body = await req.json()
    await usersRepo.update(id, body)

    return setJson({
      message: '更新成功',
    })
  },
  {
    isJwt: true,
    schema: joi.object({
      role: joi.string().required().valid('user', 'admin'),
    }),
    identity: 'root',
  }
)

const deleteUser = apiHandler(
  async (req, { params }) => {
    const { id } = params
    await usersRepo.delete(id)
    return setJson({
      message: '用户信息已经删除',
    })
  },
  {
    isJwt: true,
    identity: 'root',
  }
)

export const PATCH = updateRole
export const DELETE = deleteUser
export const dynamic = 'force-dynamic'

Next.js jwtMiddleware 授权中间件

项目中JWT身份验证中间件是使用jsonwebtoken库来验证发送到受保护API路由的请求中的JWT令牌，如果令牌无效，则抛出错误，导致全局错误处理程序返回401 Unauthorized响应。JWT中间件被添加到API处理程序包装函数中的Next.js请求管道中。

项目中的路径:/api/jwt-middleware.js

import { auth } from '../'

async function jwtMiddleware(req, isJwt = false) {
  const id = await auth.verifyToken(req, isJwt)
  req.headers.set('userId', id)
}
export { jwtMiddleware }

项目中的路径:/helpers/auth.js

import jwt from 'jsonwebtoken'

const verifyToken = async (req, isJwt) => {
  try {
    const token = req.headers.get('authorization')
    const decoded = jwt.verify(token, process.env.NEXT_PUBLIC_ACCESS_TOKEN_SECRET)
    const id = decoded.id
    return new Promise(resolve => resolve(id))
  } catch (error) {
    if (isJwt) {
      throw error
    }
  }
}

const createAccessToken = payload => {
  return jwt.sign(payload, process.env.NEXT_PUBLIC_ACCESS_TOKEN_SECRET, {
    expiresIn: '1d',
  })
}

export const auth = {
  verifyToken,
  createAccessToken,
}

Next.js identityMiddleware 身份校验中间件

在项目设计中，暂时只设计了user普通用户、admin管理员用户，以及一个超级管理员权限root字段，在apiHandler()包装器函数调用时，可以来控制该接口的权限以及身份。

如果权限不匹配，将抛出全局错误，进入Next.js请求管道中，交给全局错误处理程序，从而做到接口异常处理。

项目中的路径：/helpers/api/identity-middleware.js

import { usersRepo } from '../db-repo'

async function identityMiddleware(req, identity = 'user', isJwt = false) {
  if (identity === 'user' && isJwt === false) return

  const userId = req.headers.get('userId')
  const user = await usersRepo.getOne({ _id: userId })
  req.headers.set('userRole', user.role)
  req.headers.set('userRoot', user.root)

  if (identity === 'admin' && user.role !== 'admin') {
    throw '无权操作'
  }

  if (identity === 'root' && !user.root) {
    throw '无权操作，仅超级管理可操作'
  }
}

export { identityMiddleware }

Next.js validateMiddleware 请求参数校验中间件

在apiHandler()包装器函数调用时，通过joi工具，schema参数，来指定需要接收和校验的参数，从而避免一些冗余的字段传递，减少异常的发生。

项目中的路径：/helpers/api/validate-middleware.js

import joi from 'joi'

export { validateMiddleware }

async function validateMiddleware(req, schema) {
  if (!schema) return

  const options = {
    abortEarly: false, // include all errors
    allowUnknown: true, // ignore unknown props
    stripUnknown: true, // remove unknown props
  }

  const body = await req.json()
  const { error, value } = schema.validate(body, options)

  if (error) {
    throw `Validation error: ${error.details.map(x => x.message).join(', ')}`
  }

  // update req.json() to return sanitized req body
  req.json = () => value
}

Next.js全局错误处理程序

使用全局错误处理程序捕获所有错误，并消除了在整个Next.js API中重复错误处理代码的需要。

通常按照惯例，'string'类型的错误被视为自定义(特定于应用程序)错误，这简化了抛出自定义错误的代码，因为只需要抛出一个字符串(例如抛出'Username或password is incorrect')，如果自定义错误以'not found'结尾，则返回404响应代码，否则返回标准的400错误响应。

如果错误是一个名为“UnauthorizedError”的对象，则意味着JWT令牌验证失败，因此HTTP 401未经授权的响应代码将返回消息“无效令牌”。

所有其他(未处理的)异常都被记录到控制台，并返回一个500服务器错误响应代码。

项目中的路径：/helpers/api/error-handler.js

import { NextResponse } from 'next/server'
import { setJson } from './set-json'

export { errorHandler }

function errorHandler(err) {
  if (typeof err === 'string') {
    // custom application error
    const is404 = err.toLowerCase().endsWith('not found')
    const status = is404 ? 404 : 400
    return NextResponse.json(
      setJson({
        message: err,
        code: status,
      }),
      { status }
    )
  }

  if (err.name === 'JsonWebTokenError') {
    // jwt error - delete cookie to auto logout
    return NextResponse.json(
      setJson({
        message: 'Unauthorized',
        code: '401',
      }),
      { status: 401 }
    )
  }

  if (err.name === 'UserExistsError') {
    return NextResponse.json(
      setJson({
        message: err.message,
        code: '422',
      }),
      { status: 422 }
    )
  }

  // default to 500 server error
  console.error(err)
  return NextResponse.json(
    setJson({
      message: err.message,
      code: '500',
    }),
    { status: 500 }
  )
}

Next.js 统一处理NextResponse，灵活统一使用setJson

为什么要这样设计？我们不想在每个route中，来回的去引用NextResponse，这会使得代码可读性很差，所以在apiHandler包装器函数中，调用了HTTP handler，拿到了路由管道中想要的数据，最后统一输出。

项目中的路径：/helpers/api/set-json.js

const setJson = ({ code, message, data } = {}) => {
  return {
    code: code || 0,
    message: message || 'ok',
    data: data || null,
  }
}

export { setJson }

至此，我们已经完成了API的设计，这将会给后期的开发带来效率，但同时也带来了代码的难以理解度，只能说设计程序需要有取舍，合适就好。这是我自己基于Next.js Route 的一些设计，也欢迎大家一起通过探讨。