令牌应保存在前端的位置（reactjs）[重复]答案

【问题标题】：Where token should be kept in a front end (reactjs) [duplicate]令牌应保存在前端的位置（reactjs）[重复]
【发布时间】：2019-09-27 08:41:27
【问题描述】：

您好，我想知道将令牌保存在 react js 中的本地存储中是否是一种好习惯，因为我阅读了这篇文章 https://dev.to/rdegges/please-stop-using-local-storage-1i04，他们说将本地存储用于敏感数据并不好。我也是第一次编写具有安全性和会话的 API，如果有人向我解释必须如何正确完成事情，我会很高兴 - 如果有一些资源要读取等。如果可以将令牌与本地存储一起使用这必须怎么做？它是如何保存的？提前感谢您的帮助。

onSubmit = e => {

    e.preventDefault();
    fetch(  `/myresource/customer/${this.state.query}/${this.state.password}`)
        .then(res => res.json())
        .then((result) => {
                console.log(result);
                this.setState({
                    user: result,
                    password: result
                    localStorage.setItem('token', '');  <-- Here is not legal to set the token value where should it be saved.
                }
            );
         }
     )

     this.setState( { welcomeMsg: 'Hello, ' } );
}

【问题讨论】：

存储在localStorage中
你不能在 this.setState 里面做 localStorage.setItem('token', '');。你的代码会出错
@KunalMukherjee 在哪里设置从状态到存储的值或？我无法直接传递到请求中。
@Vencovsky 我在代码中发表了评论，我询问了如何完成这是我问题的第二部分
@AvinashMahlawat 如果用户重新加载页面，它会丢失，对吗？仅在重新加载页面时注销或丢失所有数据是没有意义的

标签： reactjs api jersey

【解决方案1】：

JWT 需要存储在用户浏览器内的安全位置。

如果将其存储在 localStorage 中，任何脚本都可以访问它在您的页面内部（这听起来就像 XSS 攻击一样糟糕让外部攻击者访问令牌）。

不要将其存储在本地存储（或会话存储）中。如果任何一个您包含在页面中的第 3 部分脚本被泄露，它可以访问所有用户的令牌。

JWT 需要存储在一个特殊的 HttpOnly cookie 中仅在 HTTP 请求中发送到服务器的 cookie，它是永远无法从运行的 JavaScript 访问（读取或写入）在浏览器中。

来自：https://logrocket.com/blog/jwt-authentication-best-practices/

因此，您需要在服务器端设置 cookie 以确保其安全。

您可以在此处找到已被广泛接受的答案：https://stackoverflow.com/a/44209185/11465265

【讨论】：

感谢@Fardenz 的帮助