NextJS实现封禁用户全局跳转至指定页面问题求助

现有代码的核心问题 #

1. 仅覆盖服务端渲染场景：_app.js中的getServerSideProps只在页面首屏刷新（服务端渲染）时触发，用户通过next/link或router.push进行客户端导航时不会执行，导致封禁用户仍能访问其他页面。
2. Session字段缺失：NextAuth默认不会将自定义用户字段（如banned）注入到Session中，若未手动配置，session.user.banned始终无法取到正确值。
3. 无日志排查依据：缺少关键节点的日志输出，难以定位问题所在。

解决方案步骤 #

步骤1：确保NextAuth Session包含banned字段

在NextAuth配置文件（如[...nextauth].js）的session回调中，手动将数据库用户的banned字段添加到Session对象：

// [...nextauth].js
import NextAuth from "next-auth";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import prisma from "../../../lib/prisma"; // 替换为你的数据库实例

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    // 你的登录服务商配置（如Google、Email等）
  ],
  callbacks: {
    async session({ session, user }) {
      // 将数据库用户的banned字段同步到session
      session.user.banned = user.banned;
      return session;
    },
  },
});

步骤2：同时处理服务端与客户端跳转逻辑

修改_app.js，同时覆盖服务端渲染和客户端导航的场景：

import { useSession } from "next-auth/react";
import { useEffect } from "react";
import { useRouter } from "next/router";
import { getSession } from "next-auth/react";

function MyApp({ Component, pageProps }) {
  const { data: session } = useSession();
  const router = useRouter();

  // 客户端检查：用户封禁且不在blocked页面时跳转
  useEffect(() => {
    if (session?.user?.banned && router.pathname !== "/blocked") {
      router.push("/blocked");
    }
  }, [session, router]);

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

// 服务端检查：首屏刷新时直接拦截跳转
export async function getServerSideProps(context) {
  const session = await getSession(context);
  if (session?.user?.banned) {
    return {
      redirect: {
        destination: "/blocked",
        permanent: false,
      },
    };
  }
  return {
    props: { session },
  };
}

export default MyApp;

步骤3：添加日志排查问题

在关键节点添加日志，确认Session和跳转逻辑是否正常触发：

// 服务端日志示例（getServerSideProps中）
export async function getServerSideProps(context) {
  const session = await getSession(context);
  console.log("服务端Session数据:", session);
  if (session?.user?.banned) {
    console.log("检测到封禁用户，执行服务端跳转");
    return { redirect: { destination: "/blocked", permanent: false } };
  }
  return { props: { session } };
}

// 客户端日志示例（useEffect中）
useEffect(() => {
  console.log("客户端Session数据:", session);
  if (session?.user?.banned && router.pathname !== "/blocked") {
    console.log("检测到封禁用户，执行客户端跳转");
    router.push("/blocked");
  }
}, [session, router]);

进阶方案（Next.js 13+ App Router）

若使用App Router，推荐使用middleware.ts实现全局路由拦截，效率更高：

// middleware.ts
import { getToken } from "next-auth/jwt";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export async function middleware(request: NextRequest) {
  const token = await getToken({ req: request });
  // 拦截封禁用户的非blocked页面请求
  if (token?.banned && request.nextUrl.pathname !== "/blocked") {
    return NextResponse.redirect(new URL("/blocked", request.url));
  }
  return NextResponse.next();
}

// 匹配所有页面路由（排除静态资源、API等）
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

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