在我以前使用auth的许多项目中，我使用localstorage或sessionstorage来存储JWT。尝试只使用http安全cookie，我遇到的唯一问题是试图从登录组件中分离报头组件。
例如，使用localstorage或sessionstorage，我通常会有一个头组件，看起来像:
function Header() {
if (localStorage.getItem('user') == null) {
return (
<div className="Header">
<Link to='/'>Home</Link>
<Link to="/Login" >Login</Link>
<Link to="/Register" >Register</Link>
</div>
)
}
return (
<div className="Header">
<Link to='/'>Home</Link>
<button onClick={logout}>Logout</button>
<Link to='/cart'>Cart</Link>
</div>
)
}
使用上述组件，在您登录之后(在一个单独的组件中)，这个将立即更新，或者在JWT保存到本地存储时立即更新。现在，由于客户端无法访问httponly安全cookie，最好的方法是什么?
最初我认为使用上下文有一个isloggedin变量，在登录后更改为true，但是变量会在刷新时重置。
因此，我的第二个想法是让头具有自己的使用效果，以检查服务器是否仍然有效的cookie/jwt。我认为这样做的问题是，由于header是每个页面上的单独组件，因此您导航到的每个页面都可能一遍又一遍地请求数据，这可能是不必要的。
我的第三个想法是在更高的组件上有一个使用效果或查询，页面上的任何交互都会导致整个页面检查cookie是否没有过期，可能每个子组件都像选项1一样获得isloggedin变量。
我最后的想法是仅仅使用httpcookie旁边的东西在会话存储，告诉组件是否显示有关登录用户的数据，但这种方法似乎可能导致不一致，如果以某种方式cookie验证，但会话存储没有通信。
我不确定哪一种是最好的方法，或者是否有更好的一种或更常见的/最佳实践方法来做到这一点，因为我想到的每种方法似乎都有其缺陷。
我会在内存或会话存储中保留关于登录用户的单独信息。你可以只保留一个isLoggedIn标志，或者是显示问候的用户名，等等。如果您希望将该信息保存在内存中，而不是会话存储中，那么您可以在每次页面刷新时触发，并向后端询问用户的登录状态。这样的请求将cookie发送到后端，后端可以用用户是否登录及其用户名的信息进行响应。
但这种方法似乎可能导致不一致，如果cookie验证，但会话存储没有通信，
我认为你不必担心前后矛盾。如果用户已经登录，但是你的页面上没有这些信息，那么你就会显示"登录"字样。按钮，用户点击后会自动登录。如果用户的会话即将过期，但您仍然拥有他们已登录的信息，那么在调用后端时将获得401响应。然后，您可以捕获这样的响应并在您的前端更新用户的状态。