Next.js 9登出页面刷新后重定向失效问题求助

我来帮你分析下这个问题的根源，然后给出针对性的解决方案：

首先，你的场景是：在Next.js项目的pages目录下创建了logout页面，用于清除用户Cookie并重定向到登录页。正常通过导航跳转登出时功能正常，但刷新logout页面后，重定向就失效了。你的现有代码如下：

Logout组件代码 #

import { logOut } from '../../store/user/userAction';
import redirect from '../../utils/redirect';
const Logout = () => {
  return null;
};
Logout.getInitialProps = ({ store, res }) => {
  store.dispatch(logOut());
  redirect(res, '/login');
  return {};
};
export default Logout;

redirect工具函数代码 #

import Router from 'next/router';
export default (res, target) => {
  if (res) {
    // server
    // 303:"see other"
    res.writeHead(302, { Location: target });
    res.end();
  } else {
    Router.push(target);
  }
};

问题原因 #

问题出在getInitialProps的执行逻辑和Next.js的页面渲染机制上：

• 当你通过应用内导航跳转到/logout时，getInitialProps会在客户端或服务器端执行，此时重定向逻辑能正常触发。
• 但刷新页面时，浏览器会直接向服务器请求/logout的HTML资源。虽然getInitialProps里调用了res.writeHead(302)发送重定向响应，但Next.js在某些情况下会优先完成页面组件的渲染（哪怕组件返回null），导致浏览器没有正确执行重定向。
• 另外，getInitialProps在Next.js的新版本中已经被标记为不推荐使用，官方更推荐使用getServerSideProps来处理服务端每次请求都需要执行的逻辑。

解决方案 #

方案1：改用getServerSideProps替代getInitialProps（推荐）

getServerSideProps会在每次请求时都在服务器端执行，包括页面刷新的场景，能确保每次访问/logout都会执行登出和重定向逻辑。

修改后的Logout组件代码：

import { logOut } from '../../store/user/userAction';
import redirect from '../../utils/redirect';

const Logout = () => {
  return null;
};

// 改用getServerSideProps
export async function getServerSideProps({ store, res }) {
  // 确保logOut是异步操作的话，要加await等待执行完成，避免重定向后Cookie还没清除
  await store.dispatch(logOut());
  redirect(res, '/login');
  return { props: {} };
}

export default Logout;

同时优化你的redirect工具函数，推荐使用303状态码（更适合状态变更后的重定向场景，比如登出）：

import Router from 'next/router';
export default (res, target) => {
  if (res) {
    // 使用303状态码，避免浏览器重复提交请求
    res.writeHead(303, { Location: target });
    res.end();
  } else {
    Router.push(target);
  }
};

方案2：兼容客户端场景（可选）

如果你的项目存在客户端渲染的场景（比如静态生成页面），可以在组件中添加useEffect来处理客户端刷新的情况，同时保留服务端的重定向逻辑：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { logOut } from '../../store/user/userAction';
import redirect from '../../utils/redirect';

const Logout = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    const handleLogout = async () => {
      await dispatch(logOut());
      redirect(null, '/login');
    };
    handleLogout();
  }, [dispatch]);

  return null;
};

// 服务端处理首屏请求
export async function getServerSideProps({ store, res }) {
  await store.dispatch(logOut());
  redirect(res, '/login');
  return { props: {} };
}

export default Logout;

这个方案可以覆盖所有场景：服务端请求时通过getServerSideProps重定向，客户端刷新时通过useEffect执行登出和跳转。

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