在应用程序未正确注销的情况下关闭时注销

Question

我使用redux在web应用程序中实现了登录/注销。如果电子邮件&密码正确，令牌被存储在redux存储中，并且用户被重定向到私有路由/panel。我正在使用persistent，所以信息存储在localStorage中(尽管它不可见(。

当用户单击注销按钮时，从注销操作返回的令牌为null。用户返回到登录页面&无法再访问私人路线。然而，如果我没有注销，而是简单地关闭应用程序，当我下次回来时，只需在链接中添加/panel，privateRoutes仍然可以访问，因为令牌仍然存在。

我如何修改它，即使应用程序关闭，用户也会自动注销？我在SO上读到，我可以使用useEffect来清除令牌，但我不确定如何以及在哪里可以做到这一点。我应该再采取行动吗？由于我已经有一个注销，所以这没有意义。

这是我的私人路线：

export const PrivateRoute = ({ component, ...rest }: any) => {
const routeComponent = (props: any) => {
if (store.getState().token) {
console.log("From private routing: ", store.getState().token);
return React.createElement(component, props);
} else {
return <Redirect to={{ pathname: "/404" }} />;
}
};
return <Route {...rest} render={routeComponent} />;
};

下面是一个代码沙盒，展示了我如何完全实现注销：

https://codesandbox.io/s/damp-mountain-qk8x2?file=/src/helpers/privateRouting.tsx:114-508

Answer 1

localStorage中的项目即使在浏览器关闭后也会持续存在。如果您想清除令牌，则可以将窗口卸载事件的事件侦听器添加到应用程序组件中。

window.addEventListener("beforeunload", (ev) => {  
// clear out the local storage
});