JWT在加载页面时被清除

Question

我目前正在react项目中注册和登录，并使用JWT进行身份验证。它在大多数情况下运行良好;当用户登录时，jwt存储在localStorage中。当我引入一个注销按钮时，问题就出现了。

<Link to="/">
<button onClick={localStorage.clear()} style={{backgroundColor: "black"}} className="login-button">Log Out</button>
</Link>

这个注销按钮在用户登录时立即呈现，我希望它能够清除本地存储，并在单击它时将用户返回到主页。但是，在onClick中放置localStorage.clear()时，一旦用户登录，JWT令牌就会被清除，即使用户没有单击注销。我在测试后发现，这似乎是问题的代码，我真的看不出为什么。

Answer 1

React在加载时执行localStorage.clear()，因为你没有给onClick事件一个函数，而是一个函数的执行/调用。

试试这样:

<button onClick={() => {localStorage.clear()}} style={{backgroundColor: "black"}} className="login-button">Log Out</button>

Answer 2

当页面加载按钮时，onClick将被触发。

<Link to="/">
<button onClick={localStorage.clear} style={{backgroundColor: "black"}} className="login-button">Log Out</button>

这应该能解决问题