如何将 JWT 令牌存储在 cookie React fetch 中答案

【问题标题】：How to store JWT token in cookie React fetch如何将 JWT 令牌存储在 cookie React fetch 中
【发布时间】：2021-01-21 02:44:42
【问题描述】：

我在发送适当的凭据时从 React 中的 fetch 方法获取令牌，但我不知道如何将 JWT 令牌存储在 cookie 中，后来重用它。下面是代码块：

fetch('http://localhost:5000/api/authenticate/login', {
  method: 'POST',
  headers: {'Content-type': 'application/json'},
  body: JSON.stringify(loginInfo),
}).then(function (response) {
  return response.json();
}).then(function (json) {
  alert(json.token);
}).catch(function (ex) {
  console.log("parsing failed", ex);
});

【问题讨论】：

标签： reactjs cookies

【解决方案1】：

要在浏览器中存储 cookie，请使用

document.cookie=`${cookieName}=${cookieValue};${cookieOptions}`

参见规范here。

如果要从服务器设置 cookie，请使用 set-cookie 标头，请参阅 here

【讨论】：

【解决方案2】：

与其在浏览器中存储令牌，不如考虑如何正确保护连接。

如果这不是问题，您可以将其存储在 cookies 或 localStorage 中，您可以在 google 上找到大量教程。（我喜欢这个“hooks approach”的反应）

但是要正确使用 JWT 令牌，您应该将其存储为 HttpOnly cookie 作为响应。见those implementations或nodeJS implementation

并且浏览器应该在它自己的每个新请求上附加令牌。见here

【讨论】：