Next.js使用withAuth保护路由出现跳转延迟，有无更优实现方案？

你当前使用的客户端withAuth高阶组件存在延迟和内容泄漏的核心原因是：useEffect的执行时机晚于组件首次渲染，受保护页面的内容会先渲染到屏幕上，再触发重定向逻辑；如果AuthContext中的用户状态需要等待客户端接口返回才更新，延迟会进一步拉长。

下面是不同场景下的最优解决方案：

方案1：使用Middleware统一校验（Next.js 12+ 全版本支持，最优方案） #

Middleware运行在服务端，会在请求到达页面之前就执行权限校验，直接完成重定向，客户端完全不会收到受保护页面的内容，无任何延迟和内容泄漏问题，还能统一管理路由规则，不需要每个页面单独加HOC。
在项目根目录新建middleware.js：

import { NextResponse } from 'next/server'

export function middleware(request) {
  // 校验登录态，一般从cookie中取存储的session或者JWT
  const authCookie = request.cookies.get('auth_token')?.value
  const isAuthenticated = checkAuthValid(authCookie) // 替换为你自己的登录态校验逻辑

  // 匹配所有需要保护的路由，未通过校验直接重定向到登录页
  if (request.nextUrl.pathname.startsWith('/protected') && !isAuthenticated) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  return NextResponse.next()
}

// 配置中间件生效的路由范围
export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*', '/settings/:path*'] // 替换为你需要保护的路由规则
}

方案2：getServerSideProps服务端校验（适用于Pages Router） #

如果使用Pages Router，也可以在页面的getServerSideProps中完成登录态校验，服务端直接返回重定向，同样不会出现内容泄漏：

export async function getServerSideProps(context) {
  const cookies = context.req.headers.cookie || ''
  const isAuthenticated = checkAuthFromCookie(cookies) // 替换为你的校验逻辑

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

  // 校验通过可以把用户信息传递给页面组件
  return {
    props: {
      user: getUserInfoFromCookie(cookies)
    },
  }
}

方案3：优化现有客户端HOC（仅适用于纯静态生成页面场景） #

如果你的页面是纯静态生成，无法使用服务端能力，可以修改现有withAuth逻辑，增加加载状态，校验完成前不渲染页面内容，避免内容泄漏：

import { useContext, useEffect, useState } from "react";
import { AuthContext } from "@context/auth";
import Router from "next/router";

const withAuth = (Component) => {
  const Auth = (props) => {
    const { user, loading } = useContext(AuthContext); // 给AuthContext新增loading状态，标记是否正在校验登录态

    useEffect(() => {
      if (!loading && !user) {
        Router.push("/login");
      }
    }, [user, loading]);

    // 校验中返回加载状态，未通过校验返回空
    if (loading) return <div>加载中...</div>
    if (!user) return null

    return <Component {...props} />;
  };

  return Auth;
};

export default withAuth;

方案优先级 #

优先使用Middleware，其次是getServerSideProps，客户端HOC仅作为无法使用服务端能力时的兜底方案。

内容的提问来源于stack exchange，提问作者Mohammad Khan