reactjs - 在 Nextjs 中验证多个页面的 DRY 方法？

Question

我知道在页面组件中我可以做类似的事情

if(!isAuthenticated){
    router.replace("/login")
  }

但是如果我的 95% 的路由都需要登录，什么是最好的 DRY 方法，这样我就不必在我的所有页面上都放置这个 if 语句。我查看了中间件，但因为它在服务器端运行，所以我无法访问应用程序状态。

我是 React 和 Nextjs 的新手。我来自一个有角度的背景，这可以通过路由守卫来解决，Nextjs 中有这样的东西吗？

Answer 1

你应该使用 Middleware

如果您的中间件是在 /pages/_middleware.js 中创建的，它将在 /pages 目录中的所有路由上运行。

有关更多信息，请阅读 official page

js的解决方案

import { NextResponse } from 'next/server'

export async function middleware(req, ev) {
    // req: contains request information

    if (!isAuthenticated()) {
        return NextResponse.redirect('/login');
    }
    return NextResponse.next();
}

ts的解决方案

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

export function middleware(req: NextRequest, ev: NextFetchEvent) {
    if (!isAuthenticated()) {
        return NextResponse.redirect('/login');
    }
    return NextResponse.next();
}