在Next.js中实现动态路由权限控制与数据预取优化

题目

在Next.js中实现动态路由权限控制与数据预取优化

信息

• 类型：问答
• 难度：⭐⭐⭐

考点

路由保护, 数据预取策略, 服务端渲染优化, 中间件应用, 缓存管理

快速回答

实现方案要点：

• 使用中间件进行全局路由拦截和权限验证
• 结合getServerSideProps和getStaticProps实现差异化数据预取
• 通过next/dynamic动态加载组件减少首屏负载
• 利用stale-while-revalidate策略平衡实时性和性能
• 在Layout组件中管理用户状态持久化

场景需求

在电商后台系统中，需实现：1) 管理员和普通用户看到不同的动态路由 2) 敏感数据实时获取 3) 非敏感数据静态化 4) 权限变更时立即生效

核心实现方案

1. 路由权限控制

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')?.value
  const userRole = validateToken(token) // JWT解码获取角色

  // 敏感路由拦截
  if (request.nextUrl.pathname.startsWith('/admin') && userRole !== 'admin') {
    return NextResponse.redirect(new URL('/403', request.url))
  }

  // 添加角色信息到header供后续使用
  const response = NextResponse.next()
  response.headers.set('x-user-role', userRole)
  return response
}

2. 差异化数据预取

// pages/products/[id].js
export async function getServerSideProps(context) {
  const userRole = context.req.headers['x-user-role'];

  // 管理员获取额外字段
  const dataSource = userRole === 'admin' 
    ? fetchSensitiveData(context.params.id)
    : fetchPublicData(context.params.id);

  return { props: { data: await dataSource } };
}

export async function getStaticPaths() {
  // 非敏感路径预生成
  return { paths: preGeneratedPaths, fallback: 'blocking' };
}

最佳实践

• 缓存策略：在next.config.js中配置stale-while-revalidate

  headers: async () => [{
    source: '/api/:path*',
    headers: [
      { key: 'Cache-Control', value: 's-maxage=60, stale-while-revalidate=300' }
    ]
  }]

• 动态加载：

  const AdminPanel = dynamic(
    () => import('@/components/AdminPanel'),
    { ssr: false }
  )

• 状态同步：在Layout中使用SWR保持用户状态

  const { data } = useSWR('/api/session', fetcher, {
    revalidateOnFocus: true
  })

常见错误

• 安全漏洞：仅在前端隐藏管理员按钮而未做服务端验证
• 性能问题：在getStaticProps中请求用户特定数据
• 缓存污染：未区分用户角色的静态页面生成
• 中间件误用：在中间件执行数据库查询导致延迟

扩展知识

• 增量静态再生(ISR)：结合revalidate和fallback处理权限变更
• 边缘函数：使用Vercel Edge Runtime加速中间件执行
• ABAC策略：基于属性的访问控制实现细粒度权限管理
• 并发优化：在getServerSideProps中使用Promise.allSettled并行请求