javascript - 如何在 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]