如何在 ReactJS 中关闭浏览器或关闭标签时调用注销 api？

Question

当我关闭浏览器或选项卡时，它应该调用注销 api。 有人可以提出任何解决方案吗？

Answer 1

这是我制作的插图，包含链接，但它不影响刷新部分，所以仍在弄清楚。

import {useEffect} from 'react';

const App = () => {

  let logOut = () => {
    localStorage.clear();
    navigate('/login')
  }

  useEffect(() => {
    const handleTabClose = event => {
      event.preventDefault();

      console.log('beforeunload event triggered');

      return (event.returnValue = 'Are you sure you want to exit?');
    };

    window.addEventListener('beforeunload', handleTabClose);

    return () => {
    logOut()
      window.removeEventListener('beforeunload', handleTabClose);
    };
  }, []);

  return (
    <div>
      <h2>hello world</h2>
    </div>
  );
};

export default App;

[https://bobbyhadz.com/blog/react-handle-tab-close-event][1]

Answer 2

您需要在您的组件卸载之前调用注销 API。

对于功能组件，清理功能是地方：

const MyComponent = (props) => {
    useEffect(() => {
        return () => {
            // Logout logic goes here
        }
    }, []);
}

对于基于类的组件，它是

componentWillUnmount()

函数：

class MyComponent extends React.Component {
    componentWillUnmount() {
        // Logout logic goes here
    }
}

等等，每次用户离开页面时都会触发注销，即使没有关闭浏览器/选项卡。为此，您可以使用状态变量，并根据其值处理出站导航。

例如，创建一个

isOnlineNav

状态变量，默认情况下为

false

，每当用户通过与应用程序交互（链接点击、导航、表单提交、重定向等）离开时，您将其设置为

true

).当用户关闭浏览器选项卡时，该值仍然是

false

，您可以使用该状态来触发注销。

功能组件中的示例：

const MyComponent = (props) => {

    const [isOnlineNav, setIsOnlineNav] = useState(false);

    const goHome = () => {
        setIsOnlineNav(true);
        window.location = "/";
    }

    useEffect(() => {
        return () => {
            if (!isOnlineNav) {
                // Logout logic goes here
            }
        }
    }, []);

    return (
        <button onClick={goHome}>Go Home</button>
    )
}

一不小心，可能会导致意想不到的错误。以下至少是其中两种可能的情况。

1. 您需要涵盖用户可以离开的所有应用内方式 从这个页面。
2. 一些其他直接的导航方式会变得更复杂一些（例如：您将无法使用带有直接路径的

   <Link>

   或

   <a>

   标签）。

Answer 3

以上方法我都试过了，都有些问题。例如，每当用户导航到另一个屏幕时，“beforeunload”侦听器都会调用，但我们只想在选项卡关闭时调用它。这是我修复它的方法。

1- First store your token in sessionStorage

   sessionStorage.setItem("logged", true);


2- Now you can check if the logged variable value is false then you can call the logout function.

 const isLogged = sessionStorage.getItem("logged");

 useEffect(() => {
    if (!isLogged) {
        dispatch(logout());
    }
   }, []);