未登录直接访问NextJS安全页面的处理机制及异常咨询

你遇到的“先显示仪表盘内容再跳转登录”的问题，核心原因是客户端鉴权逻辑执行时机过晚——页面已完成客户端渲染后才触发登录状态检查，导致短暂的内容泄露。以下是针对NextJS不同路由方案的解决办法：

一、全局路由拦截（最推荐，适配Pages/App Router） #

使用NextJS的Middleware，在请求到达页面之前就完成鉴权校验，直接拦截未登录请求并重定向，从根源避免内容泄露。

在项目根目录创建middleware.js文件：

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

export function middleware(request: NextRequest) {
  // 从Cookie获取登录凭证（根据你的鉴权方式调整，比如token）
  const authToken = request.cookies.get('authToken')?.value;
  const isLoggedIn = !!authToken;

  // 定义需要保护的路由列表
  const protectedRoutes = ['/dashboard'];
  const accessingProtectedRoute = protectedRoutes.includes(request.nextUrl.pathname);

  // 未登录访问保护路由 → 跳登录页
  if (accessingProtectedRoute && !isLoggedIn) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // 已登录访问登录页 → 跳仪表盘
  if (request.nextUrl.pathname === '/login' && isLoggedIn) {
    return NextResponse.redirect(new URL('/dashboard', request.url));
  }

  return NextResponse.next();
}

// 指定中间件生效的路由范围
export const config = {
  matcher: ['/dashboard', '/login'],
};

二、Pages Router 专属方案 #

1. SSR页面：服务端提前校验（getServerSideProps） #

在安全页面的getServerSideProps中直接校验登录状态，未登录则返回重定向配置，不会将页面内容发送给客户端：

// pages/dashboard.js
export async function getServerSideProps(context) {
  // 从请求Cookie获取登录凭证
  const authToken = context.req.cookies.authToken;

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

  // 可选：验证token有效性，获取用户信息
  // const user = await fetchUserInfo(authToken);

  return {
    props: { /* user: user */ }, // 传递给页面组件的参数
  };
}

export default function Dashboard(props) {
  return <div>欢迎访问仪表盘</div>;
}

2. CSR/ISR页面：客户端路由守卫 #

如果页面是客户端渲染，可在_app.js中全局监听路由变化，实时校验登录状态：

// pages/_app.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  // 从全局状态（如Context/Redux）或Cookie获取登录状态
  const isLoggedIn = pageProps.isLoggedIn;

  useEffect(() => {
    const protectedRoutes = ['/dashboard'];
    if (protectedRoutes.includes(router.pathname) && !isLoggedIn) {
      router.push('/login');
    }
  }, [router, isLoggedIn]);

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

export default MyApp;

三、App Router（NextJS 13+）专属方案 #

服务端组件直接重定向 #

安全页面使用服务端组件，在组件初始化时校验登录状态，未登录直接调用redirect：

// app/dashboard/page.js
import { redirect } from 'next/navigation';
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const authToken = cookies().get('authToken')?.value;

  if (!authToken) {
    redirect('/login');
  }

  // 可选：验证token并获取用户信息
  // const user = await fetchUserInfo(authToken);

  return <div>欢迎访问仪表盘</div>;
}

内容的提问来源于stack exchange，提问作者Md. Khalakuzzaman Khan