如何阻止用户登录后点击浏览器返回键回到登录页？

你的问题核心有两个：一是登录后点返回按钮会回到登录页，二是客户端判断session再跳转导致页面短暂闪烁。

1. 解决页面闪烁问题（从根源避免登录页渲染） #

不要在组件内部用router.push做跳转——因为组件会先渲染登录页内容，再执行跳转逻辑，所以必然出现短暂闪烁。应该在页面渲染前就完成重定向判断：

如果你用的是Next.js Pages Router

在登录页文件里添加服务端渲染的判断逻辑，页面加载前就检查session，直接完成重定向：

export async function getServerSideProps(context) {
  const session = await getSession(context);
  if (session) {
    return {
      redirect: {
        destination: '/homepage',
        permanent: false,
      },
    };
  }
  return { props: {} };
}

如果你用的是Next.js App Router

在项目根目录创建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 session = await getToken({ req: request });
  // 已登录用户访问登录页时，直接重定向到主页
  if (session && request.nextUrl.pathname === '/login') {
    return NextResponse.redirect(new URL('/homepage', request.url));
  }
}

export const config = {
  matcher: ['/login'], // 只对登录页生效
};

2. 解决返回按钮回到登录页的问题 #

登录成功后，用router.replace替代router.push修改浏览器历史记录，这样登录页不会被留在历史栈里，点击返回按钮就不会回到登录页了。修改你的登录按钮逻辑：

<Button
  fullWidth
  sx={{ textTransform: 'none' }}
  variant="outlined"
  startIcon={googleIcon}
  onClick={() => {
    signIn('google', { 
      callbackUrl: '/homepage',
      redirect: false // 关闭自动跳转，手动处理
    }).then((result) => {
      if (result.ok) {
        router.replace('/homepage'); // 用replace替换历史记录
      }
    });
  }}
>
  Entrar usando a conta do Google
</Button>

这样两个问题就都解决了：既不会出现登录页闪烁，点击返回按钮也不会回到登录页。

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