编辑“︁Next.js保护路由”︁

= Next.js保护路由 =

'''Next.js保护路由'''是指在Next.js应用中通过身份验证机制限制特定页面的访问权限，确保只有授权用户才能访问受保护资源。这是现代Web应用开发中的核心安全实践，常用于用户仪表盘、管理后台等场景。

== 基本概念 ==

在Next.js中实现路由保护主要有两种方式：
* '''客户端保护'''：使用React组件状态或Context API在渲染阶段控制访问
* '''服务端保护'''：通过getServerSideProps或中间件(Middleware)在服务端验证

<mermaid>
graph TD
    A[访问受保护路由] --> B{已认证?}
    B -->|是| C[渲染页面]
    B -->|否| D[重定向到登录页]
</mermaid>

== 客户端保护实现 ==

以下是一个使用React Context实现的客户端保护示例：

<syntaxhighlight lang="javascript">
// components/AuthContext.js
import { createContext, useContext, useEffect, useState } from 'react'
import { useRouter } from 'next/router'

const AuthContext = createContext()

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null)
  const router = useRouter()

  // 模拟登录功能
  const login = async (credentials) => {
    const res = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials)
    })
    const data = await res.json()
    setUser(data.user)
  }

  // 检查用户是否已认证
  useEffect(() => {
    const checkAuth = async () => {
      const res = await fetch('/api/check-auth')
      if (!res.ok) router.push('/login')
      else setUser(await res.json())
    }
    checkAuth()
  }, [])

  return (
    <AuthContext.Provider value={{ user, login }}>
      {children}
    </AuthContext.Provider>
  )
}

export function useAuth() {
  return useContext(AuthContext)
}
</syntaxhighlight>

然后在页面组件中使用：

<syntaxhighlight lang="javascript">
// pages/dashboard.js
import { useAuth } from '../components/AuthContext'

export default function Dashboard() {
  const { user } = useAuth()

  if (!user) return <div>Loading...</div>

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      {/* 受保护内容 */}
    </div>
  )
}
</syntaxhighlight>

== 服务端保护实现 ==

对于更安全的实现，推荐使用服务端验证：

<syntaxhighlight lang="javascript">
// pages/protected-page.js
export async function getServerSideProps(context) {
  const { req } = context
  const { token } = req.cookies

  if (!token) {
    return {
      redirect: {
        destination: '/login',
        permanent: false
      }
    }
  }

  // 验证token有效性
  const user = await verifyToken(token)
  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false
      }
    }
  }

  return {
    props: { user }
  }
}

export default function ProtectedPage({ user }) {
  return (
    <div>
      <h1>Protected Content</h1>
      <p>Hello, {user.name}</p>
    </div>
  )
}
</syntaxhighlight>

== 使用中间件保护路由 ==

Next.js 12+引入了中间件功能，可以在请求到达页面前进行验证：

<syntaxhighlight lang="javascript">
// middleware.js
import { NextResponse } from 'next/server'

export function middleware(request) {
  const token = request.cookies.get('token')?.value

  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }

  return NextResponse.next()
}
</syntaxhighlight>

== 实际应用场景 ==

'''电商后台管理系统'''
1. 普通用户访问/admin时重定向到首页
2. 管理员用户显示完整控制面板
3. 会话过期后自动登出

'''性能考虑'''
* 客户端保护适合对安全性要求不高的场景
* 服务端保护适合敏感数据
* 中间件适合全站范围的保护策略

== 数学原理 ==

保护路由本质上是一个权限验证函数：

<math>
f(x) = \begin{cases}
\text{允许访问} & \text{当 } x \in \text{有效凭证集合} \\
\text{拒绝访问} & \text{其他情况}
\end{cases}
</math>

其中<math>x</math>代表用户凭证（如JWT、session cookie等）。

== 最佳实践 ==

* 始终在服务端验证敏感路由
* 实现CSRF保护
* 使用HttpOnly cookies存储会话令牌
* 定期轮换加密密钥
* 记录所有授权失败尝试

== 常见问题 ==

'''Q: 如何避免闪屏问题？'''
A: 在客户端保护中，先显示加载状态，待验证完成后再决定渲染内容或重定向。

'''Q: 如何保护API路由？'''
A: 在API路由中使用相同的验证逻辑，例如：

<syntaxhighlight lang="javascript">
// pages/api/protected.js
export default function handler(req, res) {
  const token = req.cookies.token
  if (!token) return res.status(401).json({ error: 'Unauthorized' })
  
  // 处理受保护API逻辑
  res.status(200).json({ data: '敏感数据' })
}
</syntaxhighlight>

== 总结 ==

Next.js提供了多种保护路由的方法，开发者应根据应用的安全需求选择适当方案。客户端保护实现简单但安全性较低，服务端保护和中间件提供更强的安全保障。在实际项目中，通常会组合使用这些技术来构建全面的安全体系。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js身份验证与授权]]