Next.js 13 API路由保护相关问题咨询

嗨，我来帮你理清这个问题——完全可以既保护API路由，又让非管理员用户合法访问，关键是跳出“要么全锁要么全开放”的思维，做细粒度的权限控制就好！结合Next.js 13的特性，给你几个实用方案：

1. 基于角色的细粒度数据/操作权限 #

API路由的保护不一定是“只有admin能进”，而是可以根据用户角色返回不同权限的内容，或者允许不同的操作。比如普通用户能查看公开数据，管理员能查看所有数据并进行修改。

以App Router的Route Handler为例：

// app/api/posts/route.ts
import { NextResponse } from 'next/server';
import { getServerSession } from 'next-auth/next';
import { authOptions } from '@/app/api/auth/[...nextauth]/route';

export async function GET(request: Request) {
  // 先验证用户是否登录（基础保护，防止未授权访问）
  const session = await getServerSession(authOptions);
  if (!session) {
    return NextResponse.json({ error: '请先登录' }, { status: 401 });
  }

  // 根据用户角色返回对应权限的数据
  const userRole = session.user?.role;
  if (userRole === 'admin') {
    // 管理员可以获取包含敏感信息的完整数据
    const allPosts = await getAllPostsWithAdminMeta();
    return NextResponse.json(allPosts);
  } else {
    // 普通用户只能获取公开可见的内容
    const publicPosts = await getPublicPosts();
    return NextResponse.json(publicPosts);
  }
}

2. 中间件里的路由级权限控制 #

如果用Next.js 13的Middleware做全局权限校验，不要给所有API路由都设为admin-only，而是针对特定路由配置不同规则。比如只有/api/admin/*开头的路由需要管理员权限，其他API路由只要用户登录就能访问。

示例代码：

// app/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { getToken } from 'next-auth/jwt';

export async function middleware(request: NextRequest) {
  const token = await getToken({ req: request });
  
  // 管理员专属API路由：仅admin角色可访问
  if (request.nextUrl.pathname.startsWith('/api/admin/')) {
    if (!token || token.role !== 'admin') {
      return NextResponse.json({ error: '仅管理员可访问此资源' }, { status: 403 });
    }
  }

  // 普通API路由：只要登录用户就能访问
  else if (request.nextUrl.pathname.startsWith('/api/')) {
    if (!token) {
      return NextResponse.json({ error: '未授权访问，请先登录' }, { status: 401 });
    }
  }

  return NextResponse.next();
}

// 只对API路由生效
export const config = {
  matcher: ['/api/:path*'],
};

3. 区分HTTP方法的权限规则 #

很多场景下，普通用户可以读取数据（GET请求），但只有管理员能修改/删除数据（POST/PUT/DELETE请求）。这种情况可以在同一个Route Handler里，针对不同HTTP方法设置不同权限。

示例：

// app/api/posts/[id]/route.ts
import { NextResponse } from 'next/server';
import { getServerSession } from 'next-auth/next';
import { authOptions } from '@/app/api/auth/[...nextauth]/route';

// 所有登录用户都能获取单篇文章
export async function GET(request: Request, { params }: { params: { id: string } }) {
  const session = await getServerSession(authOptions);
  if (!session) return NextResponse.json({ error: '未授权' }, { status: 401 });
  
  const post = await getPostById(params.id);
  return NextResponse.json(post);
}

// 仅管理员能修改文章
export async function PUT(request: Request, { params }: { params: { id: string } }) {
  const session = await getServerSession(authOptions);
  if (!session || session.user?.role !== 'admin') {
    return NextResponse.json({ error: '仅管理员可修改此资源' }, { status: 403 });
  }
  
  const body = await request.json();
  const updatedPost = await updatePost(params.id, body);
  return NextResponse.json(updatedPost);
}

总结 #

API路由当然需要保护，只是不要用“一刀切”的admin-only规则。核心思路是：

1. 先验证用户身份（确保是登录状态）；
2. 再根据用户角色、操作类型、路由路径这几个维度，设计灵活的权限规则，让不同用户都能在自己的权限范围内访问API。

备注：内容来源于stack exchange，提问作者Soni canra Wiguna