用户在使用 JWT 的同构（或通用）React 应用程序上的上下文
User's context on isomorphic (or universal) react app with JWT
我实际上正在开发一个 react-based front-end 应用程序，我想打开同构功能。
用户可以通过身份验证，我目前使用JWT将客户端连接存储在localstorage上。
现在，我的问题是应用程序的第一页在用户连接或未连接的情况下可能会有所不同。
实际上，页面已加载，并且 xhr 请求与 header 中的令牌一起发送，因此服务器的响应取决于令牌。
但是，如果我切换到同构渲染，令牌将不会包含在请求中，因此服务器将 return 响应，就好像用户断开连接一样。
这里有一个方案来解释它的实际工作原理：
首先浏览器从 node.js 服务器加载 javascript。如果用户令牌已经存在，则浏览器使用此令牌将请求发送到后端。所以响应取决于用户的权限。
现在，一个同构js的方案：
页面由node.js生成。因此请求由 node.js 发送到后端，因此 node.js 无法访问存储在浏览器中的令牌。
我想知道有没有办法解决这个问题
谢谢。
您可以将 JWT 存储在 cookie 中，而不是在 localStorage 中。这样，您的服务器端应用程序也可以访问 JWT 并使用它进行经过身份验证的调用。
您使用 JWT 的机制不会改变，只是您存储它们的地方。像 js-cookie 这样的库使管理 cookie 变得容易。
Cookies.set('jwt', jwt, { secure: true });
问题是您现在需要小心 CSRF。 API 从另一个站点触发到您的域的调用将包含 cookie（如果用户有 cookie）。在页面上创建唯一的 CSRF 令牌可以防止这种情况发生。
Stormpath 在 cookies vs localStorage.
中有一篇很好的存储文章
我实际上正在开发一个 react-based front-end 应用程序，我想打开同构功能。 用户可以通过身份验证，我目前使用JWT将客户端连接存储在localstorage上。
现在，我的问题是应用程序的第一页在用户连接或未连接的情况下可能会有所不同。
实际上，页面已加载，并且 xhr 请求与 header 中的令牌一起发送，因此服务器的响应取决于令牌。 但是，如果我切换到同构渲染，令牌将不会包含在请求中，因此服务器将 return 响应，就好像用户断开连接一样。
这里有一个方案来解释它的实际工作原理：
首先浏览器从 node.js 服务器加载 javascript。如果用户令牌已经存在，则浏览器使用此令牌将请求发送到后端。所以响应取决于用户的权限。
现在，一个同构js的方案：
页面由node.js生成。因此请求由 node.js 发送到后端，因此 node.js 无法访问存储在浏览器中的令牌。
我想知道有没有办法解决这个问题
谢谢。
您可以将 JWT 存储在 cookie 中，而不是在 localStorage 中。这样，您的服务器端应用程序也可以访问 JWT 并使用它进行经过身份验证的调用。
您使用 JWT 的机制不会改变，只是您存储它们的地方。像 js-cookie 这样的库使管理 cookie 变得容易。
Cookies.set('jwt', jwt, { secure: true });
问题是您现在需要小心 CSRF。 API 从另一个站点触发到您的域的调用将包含 cookie（如果用户有 cookie）。在页面上创建唯一的 CSRF 令牌可以防止这种情况发生。
Stormpath 在 cookies vs localStorage.
中有一篇很好的存储文章