Next.js实现页面刷新后登出成功模态框持久化显示

登出成功后需要让提示模态框在页面刷新后依然显示，直到用户点击关闭按钮。当前执行登出操作时页面会刷新，导致“登出成功”模态框直接消失。尝试过useEffect但用法有误。

页面刷新后React组件的state会重置，所以需要用**本地存储（localStorage）**来持久化登出成功的状态，具体步骤：

• 登出完成后，在localStorage中存入登出成功的标记
• 组件挂载时，读取localStorage的标记，决定是否打开模态框
• 关闭模态框时，清除localStorage中的标记

SigninButton组件 #

"use client";
import "./signinbutton.css";
import { signIn, signOut, useSession } from "next-auth/react";
import Modal from "./Modal";
import React, { useState, useEffect } from "react";

import { AiOutlineUserAdd } from "react-icons/ai";
import { IoMdLogOut } from "react-icons/io";

const SigninButton = ({ darkMode }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const { data: session } = useSession();

  // 组件挂载时检查localStorage，决定是否打开模态框
  useEffect(() => {
    const shouldShowModal = localStorage.getItem("showSignoutModal") === "true";
    if (shouldShowModal) {
      setIsModalOpen(true);
    }
  }, []);

  // 登出函数：完成后在localStorage标记需要显示模态框
  function logOut() {
    signOut().then(() => {
      localStorage.setItem("showSignoutModal", "true");
      // signOut会触发页面刷新，此处setIsModalOpen不会生效，刷新后靠useEffect读取localStorage打开模态框
    });
  }

  // 关闭模态框：清除localStorage标记并关闭模态框
  function closeModal() {
    setIsModalOpen(false);
    localStorage.removeItem("showSignoutModal");
  }

  if (session && session.user) {
    return (
      <div>
        <button onClick={logOut} className="profile-button">
          <div className="logout-icon">
            <IoMdLogOut
              size={32}
              color={darkMode ? "#ef9726" : "#0099d8"}
            ></IoMdLogOut>
          </div>
        </button>
        <Modal show={isModalOpen} onClose={closeModal}>
          <h2>Successful Signout</h2>
        </Modal>
      </div>
    );
  }

  return (
    <button onClick={() => signIn()} className="profile-button">
      <div className="user-icon">
        <AiOutlineUserAdd
          size={34}
          color={darkMode ? "#ef9726" : "#0099d8"}
        ></AiOutlineUserAdd>
      </div>
    </button>
  );
};

export default SigninButton;

Modal组件（无需修改，保留原代码） #

import React from "react";
import "./modal.css"; // 可单独创建CSS文件定义模态框样式

const Modal = ({ show, onClose, children }) => {
  if (!show) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
};

export default Modal;

• 由于signOut()会触发页面刷新，登出时直接设置setIsModalOpen(true)不会生效，必须依赖localStorage持久化状态
• 组件挂载时通过useEffect读取localStorage，判断是否需要显示模态框
• 关闭模态框时一定要清除localStorage的标记，避免下次进入页面时重复显示

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