NextJS登录后如何保护预授权页面？Middleware使用遇阻求助

核心思路 #

登录后用户持有有效的accessToken，需在路由层面拦截登录、注册这类预授权页面的访问，确保已授权用户无法进入。NextJS的Middleware是合适方案，但要梳理好Token验证和路由重定向的逻辑。

具体实现步骤 #

1. 修正Middleware的拦截逻辑 #

在middleware.ts中，需完成Token提取、有效性校验、路由判断三个核心动作：

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

export function middleware(request: NextRequest) {
  // 从Cookie中获取accessToken（推荐用Cookie存储，安全性更高）
  const accessToken = request.cookies.get('accessToken')?.value;
  
  // 定义需要拦截的预授权页面路由
  const authRoutes = ['/login', '/register'];
  const currentPath = request.nextUrl.pathname;

  // 已登录用户访问预授权页面，直接重定向到首页/仪表盘
  if (accessToken && authRoutes.includes(currentPath)) {
    // 可选：调用后端接口验证Token有效性，避免前端伪造
    // const verifyRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/verify-token`, {
    //   headers: { Authorization: `Bearer ${accessToken}` }
    // });
    // if (verifyRes.ok) {
      return NextResponse.redirect(new URL('/dashboard', request.url));
    // }
  }

  return NextResponse.next();
}

// 指定Middleware生效的路由范围
export const config = {
  matcher: ['/login', '/register', '/dashboard/:path*'],
};

2. Token存储与验证的注意事项 #

• 优先用Cookie存Token：设置HttpOnly和Secure属性，避免XSS攻击，且Middleware能直接读取
• 必须做后端验证：不要仅依赖前端解析JWT，一定要调用后端的Token校验接口，防止伪造
• 处理Token过期：验证时检查过期时间，过期则清除Cookie并重定向到登录页

3. 页面层面的兜底校验 #

防止Middleware被绕过，在登录/注册页面做二次拦截：

App Router客户端组件示例：

'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { getCookie } from 'cookies-next';

export default function LoginPage() {
  const router = useRouter();

  useEffect(() => {
    const token = getCookie('accessToken');
    if (token) router.push('/dashboard');
  }, []);

  return <div>登录表单内容</div>;
}

Pages Router服务端渲染示例：

import { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies';

export default function LoginPage() {
  return <div>登录表单内容</div>;
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const cookies = parseCookies(context);
  if (cookies.accessToken) {
    return {
      redirect: { destination: '/dashboard', permanent: false },
    };
  }
  return { props: {} };
};

4. 常见问题排查 #

• Middleware不生效：检查config.matcher是否包含目标路由，NextJS 13+中Middleware需放在项目根目录或app目录下
• Token读取失败：如果用LocalStorage存Token，Middleware无法直接读取，需改用Cookie或在客户端处理拦截
• 重定向循环：确保重定向目标不在拦截列表中，比如不要把/dashboard加入authRoutes

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