React:当用户关闭浏览器时删除cookie

Question

我正在使用库react-cookie (https://www.npmjs.com/package/react-cookie)，并且希望在关闭浏览器或选项卡时删除用户cookie。我在我的Approuter中使用了ComponentWillUnmount，但当浏览器关闭时，它不起作用。有人知道如何做到这一点吗？

import React from 'react';
import {Router, Route, Switch} from 'react-router-dom';
import history from '../data/history';
import { withCookies, Cookies } from 'react-cookie';
import { instanceOf } from 'prop-types';


class AppRouter extends React.Component{

static propTypes = {
    cookies: instanceOf(Cookies).isRequired
};


constructor(props){
    super(props)
}

componentWillMount(){
    const {cookies} = this.props;
    cookies.remove('userInfo');
}

render(){
    return(
        <Router history={history}>
            <div>
                <Header/>
                <div className="main-container">
                    <Switch>
                        //routes
                    </Switch>
                    <Footer/>
                </div> 
            </div>
        </Router>
    );
}
}

export default withCookies(AppRouter);

路由器确实会收到cookies，所以为什么我不能用componentWillUnmount删除它？我如何删除它们呢？

Answer 1

当您创建cookie时。请将expires设置为0。e.g

cookies.set('userInfo', name, { expires: 0 });

则此cookie将在浏览器关闭时过期。

Answer 2

不是真正特定于React，但您可以使用以下代码：

​

window.addEventListener("beforeunload", (ev) => 
{  
    ev.preventDefault();
    cookies.remove('userInfo');
});

​

也许在挂载时调用它，这样你就可以访问你的类实例。

Answer 3

这可能会对你有帮助。

componentDidMount(){
    window.addEventListener(
        "beforeunload",
        cookies.remove('userInfo')
    );
}