Question

我正在开发一个基于反应的前端应用程序，我想打开同构功能。用户可以进行身份验证，我目前使用JWT将客户端连接存储在localstorage上。

现在，我的问题是应用的第一页在用户连接的情况下可能会有所不同。

实际上，页面已加载，并且xhr请求与标头中的标记一起发送，因此服务器的响应取决于标记。但是，如果我切换到同构渲染，则令牌将不会包含在请求中，因此服务器将返回响应，就好像用户已断开连接一样。

这是一个解释它实际工作原理的方案：

首先，浏览器从node.js服务器加载javascript。如果用户令牌已存在，则浏览器会使用此令牌将请求发送到后端。因此，响应取决于用户的权限。

现在，同构js的计划：

该页面由node.js生成。因此，请求由node.js发送到后端，因此node.js无法访问存储在浏览器中的令牌。

我想知道是否有任何方法可以解决这个问题。

谢谢。

Answer 1

您可以将JWT存储在cookie中，而不是存储在localStorage中。这样，您的服务器端应用程序也可以访问JWT并使用它来进行经过身份验证的调用。

您使用JWT的机制并没有改变，只是存储它们的位置。像js-cookie这样的库使得管理cookie变得容易。

Cookies.set('jwt', jwt, { secure: true });

问题在于您现在需要小心CSRF。从其他网站触发到您的域的API调用将包括用户拥有的cookie。在页面上创建唯一的CSRF令牌可以防止这种情况发生。

Stormpath在cookies vs localStorage中有很好的存储记录。