在 React 应用程序中使用访问令牌实现身份验证的最佳方法是什么？答案

【问题标题】：What could be the best way to implement authentication using access token in React app?在 React 应用程序中使用访问令牌实现身份验证的最佳方法是什么？
【发布时间】：2020-02-25 18:37:25
【问题描述】：

我是 React 的新手。尝试在 React Web 应用程序中使用 Express.js 实现身份验证。我在后端使用 HttpOnly 标志设置了响应 cookie 中的令牌，但无法在前端（反应应用程序）读取它。我已经阅读了几个关于 cookie 的教程，并且了解到如果它是 HttpOnly，它将无法在 Javascript 中读取。

我曾想过在 React 应用程序上创建 cookie，但它们将是非 HttpOnly 的，这会使我的网站易受攻击。使用访问令牌在 React 应用中实现身份验证的最佳方法是什么？

我已经使用 max-age、secure 和 domain 设置了 cookie，但无法在 React 应用程序中使用 HttpOnly 标志访问 cookie，并且在 React 应用程序中设置 cookie 不会使它们成为 HttpOnly。

【问题讨论】：

此问题的标题与问题正文中提出的问题不匹配。事实上，标题问题在问题正文中得到了回答，并且以 cookie 类型的名称为“HttpOnly”。正文中的问题广泛且基于意见；在 React 中实现身份验证的方式有很多种——哪种方式“最好”取决于许多因素。
"有没有办法读取 React 中响应设置的 Httponly cookie？" - 不。“使用访问令牌在 React 应用程序中实现身份验证的最佳方式是什么？” - 这太宽泛了，而且基于观点。
对不起，如果问题标题不适合问题正文。我正在尝试找出一种使用快速应用程序提供的访问令牌在反应应用程序中实现身份验证的方法。请提出开始的方法。
只需在谷歌搜索“mern stack jsonwebtoken”即可。
谢谢@SuleymanSah。我决定使用服务器端 cookie 并在其上验证用户。

标签： javascript node.js reactjs express

【解决方案1】：

我们不需要存储或传递令牌；我们甚至无法通过 JavaScript 访问它，因为它存储在 HttpOnly cookie 中。

不要从服务器端响应中重新设置访问令牌，而是在发送响应时使用您的服务器端代码设置 cookie。使用 axios 和 withCredentials 属性向 Axios 指示它应该将 API 域的 cookie 与请求一起发送。参考：https://www.bignerdranch.com/blog/react-data-layer-part-3-login/

【讨论】：

感谢您的建议。 cookie（访问令牌）是从服务器响应中设置的。但是在进行其他调用时，服务器没有验证来自 cookie 的访问令牌，它不在我的控制范围内。
感谢大家的意见。我在 API 的响应中设置了 cookie。按照 Senthil 的建议，使用带有凭据的 fetch 从服务器端的 cookie 验证访问令牌。
嗨@Senthil，您的建议在 Chrome 和 Firefox 中运行良好，但 Safari 根本不允许您设置来自第三方的 cookie。我的 API 和 react 应用程序正在 Heroku 上运行，这意味着不同的域和身份验证在 Safari 中失败。我的下一个障碍是即使我购买了一个域，Heroku 也不允许您为不同的应用程序设置相同的自定义域。
在中间件中设置它，看看它是否解决了问题： res.set('credentials', 'include');参考：stackoverflow.com/questions/50717702/… 参考 2：github.com/expressjs/session/issues/610
我刚刚在stackoverflow.com/questions/42301884 上发现了一个类似的问题。 Safari 上没有设置 Cookie，res.set 似乎没有问题，因为它们一开始就没有设置。