Next.js 受限页面和用户认证最佳实践

Question

我正在前端的 Next.js 上从头开始构建用户登录。 身份验证当前的工作方式是这样的：

1. 在登录页面上，正在向登录 API 端点发送一个请求，其中包含电子邮件/密码以进行验证
2. 如果验证通过，它会使用一个 JSON 对象进行响应，其中包括 JWT 令牌数据和刷新令牌（作为 httponly cookie）
3. 在前端，JWT 令牌保存在应用程序状态

当我在一个只能在用户登录时访问的受限页面上时，它正在检查令牌是否存在。 这可行，但我意识到用户很容易通过 JS 手动更新此状态，这意味着他们可以访问受限页面。

我的问题是：在这种情况下，最佳做法是什么？

Answer 1

将您的验证逻辑添加到中间件 ( https://nextjs.org/docs/advanced-features/middleware )。

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

export function middleware(request: NextRequest) {

    if (!validated ) {
        return NextResponse.redirect("/auth/signin")
    } 

    return NextResponse.next()
}

// See "Matching Paths" below to learn more
export const config = {
  matcher: '/about/:path*',
}