Next.js登出功能异常：无法销毁会话并展示提示信息

问题说明 #

我是React.js和Next.js新手，正在开发后台管理面板。登录功能已在index.js（登录页）实现，通过sessionStorage存储会话信息。现在需要实现登出功能，要求销毁会话并显示提示信息，但当前代码无法实现该需求。

现有代码 #

登录页（index.js）登录逻辑

const data = {
  name: email,
  password: password,
};
axios
  .post('xxxxxxxxxxxxxxxxxxxxxx/api/testinfo3/', data)
  .then(function (response) {
    if (response.data.msg == 'wrong') {
      //display error message ( if wrong credentials entered)
    } else {
      sessionStorage.setItem('email', response.data.email); // put value into session
      const email = sessionStorage.getItem('email');
      router.push('/dashboard');
    }
  });

登出按钮所在的header.js

const handleClick = (e: any) => {
  router.push({ pathname: '/', query: { form: 'logout' } });
};

<Link href='' onClick={(e) => handleClick(e)}>
  Logout
</Link>;

登录页（index.js）处理登出的逻辑

useEffect(() => {
  if (router.query?.form === 'logout') {
    //display logout message
  }
}, [router.query]);

问题分析 #

当前代码存在两个核心问题：

1. 登出时未销毁sessionStorage中的会话信息，用户实际仍处于"已登录"状态
2. Link组件使用不当，默认跳转行为会和router.push冲突；同时未实现提示信息的显示逻辑

修复方案 #

1. 修改header.js中的登出按钮逻辑

直接在点击事件中销毁会话，再跳转到登录页，并修正Link的用法：

import Link from 'next/link';
import { useRouter } from 'next/router';

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

  const handleLogout = (e) => {
    e.preventDefault(); // 阻止Link默认跳转行为
    sessionStorage.removeItem('email'); // 删除会话信息
    router.push({ pathname: '/', query: { form: 'logout' } });
  };

  return (
    <nav>
      {/* 其他导航项 */}
      <Link href="/" onClick={handleLogout}>
        Logout
      </Link>
    </nav>
  );
}

或者更简洁，直接用按钮替代Link：

import { useRouter } from 'next/router';

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

  const handleLogout = () => {
    sessionStorage.removeItem('email');
    router.push({ pathname: '/', query: { form: 'logout' } });
  };

  return (
    <nav>
      {/* 其他导航项 */}
      <button onClick={handleLogout} style={{ border: 'none', background: 'none', cursor: 'pointer' }}>
        Logout
      </button>
    </nav>
  );
}

2. 完善登录页的登出提示逻辑

添加状态控制提示信息显示，并在检测到logout参数时处理会话清除和提示：

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import axios from 'axios';

export default function LoginPage() {
  const router = useRouter();
  const [showLogoutMsg, setShowLogoutMsg] = useState(false);
  // 登录相关状态（email、password等）

  useEffect(() => {
    if (router.query?.form === 'logout') {
      // 双重保险：再次清除会话，避免异常情况
      sessionStorage.removeItem('email');
      setShowLogoutMsg(true);
      
      // 3秒后自动隐藏提示并清除URL中的logout参数
      setTimeout(() => {
        setShowLogoutMsg(false);
        router.push('/', undefined, { shallow: true });
      }, 3000);
    }
  }, [router.query]);

  // 登录逻辑保持不变...

  return (
    <div className="login-page">
      {/* 登录表单 */}
      {/* 登出提示 */}
      {showLogoutMsg && (
        <div style={{ color: 'green', padding: '10px', marginBottom: '15px' }}>
          已成功登出！
        </div>
      )}
    </div>
  );
}

关键修改点 #

• 登出时必须调用sessionStorage.removeItem('email')销毁会话，确保用户完全退出
• 修正Link组件的默认跳转行为，避免和router.push冲突
• 通过React状态控制提示信息的显示/隐藏，并添加自动隐藏和URL参数清除的逻辑，提升用户体验

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