简体繁体 English

httpOnly cookie：检查用户是否在 react-app 中登录

[英]httpOnly cookie: check if user is logged in in react-app

原文 2021-04-04 18:50:24 7 2 node.js/ reactjs/ cookies

I have a react app and a nodejs server.我有一个反应应用程序和一个 nodejs 服务器。 I set a httpOnly-cookie containing a JWT for authentication.我设置了一个包含 JWT 的 httpOnly-cookie 用于身份验证。 This works.这行得通。 The problem is: I need some logic client-side to check if the user is logged in. When the user logs in, I could store this "state" in-memory (eg. useState), but when the browser reloads, this state is gone (while the cookie is still there).问题是：我需要一些逻辑客户端来检查用户是否登录。当用户登录时，我可以将这个“状态”存储在内存中（例如 useState），但是当浏览器重新加载时，这个 state不见了（虽然 cookie 还在那里）。

I'm tried using js-cookie but obviously this won't work because it's a httpOnly cookie.我尝试使用js-cookie但显然这不起作用，因为它是一个 httpOnly cookie。

How can I check - without doing a (test) axios request to my server - if the user is logged in, when opening the react app in the browser?在浏览器中打开反应应用程序时，如果用户已登录，我如何检查 - 无需对我的服务器进行（测试）axios 请求？

Edit: The answer in this question recommends to store the token in LocalStorage, but other resources (lik the discussion in the answer of this question ) says cookies are the way to go.编辑：此问题的答案建议将令牌存储在 LocalStorage 中，但其他资源（如本问题答案中的讨论）说 cookies 是通往 go 的方式。

to be clear, I don't need direct access to the token in the cookie, the cookie is send with every axios request ( {withCredentials: true} ) and it works like expected.需要明确的是，我不需要直接访问cookie 中的令牌，cookie 随每个 axios 请求（ {withCredentials: true} ）一起发送，它的工作方式与预期的一样。 But I just need to know if the cookie is set (and so the user is logged in).但我只需要知道是否设置了 cookie（因此用户已登录）。

2 个解决方案

There can be multiple approaches for this scenario.这种情况可以有多种方法。 What I think you can do.我认为你能做到的。

1 - You can send a http request to check if the JWT is valid on initial app load and whenever app is reloaded (Same thing basically) and then preserve some authentication state inside the app (Context Api or Redux) and this way you control the routes, etc. 1 - You can send a http request to check if the JWT is valid on initial app load and whenever app is reloaded (Same thing basically) and then preserve some authentication state inside the app (Context Api or Redux) and this way you control the路线等

2 - Make sure that whenever the JWT is expired you clear the cookie and whenever client receives 401 you refresh whatever authenticated state you have and redirect the user to login page or any page that does not need authentication. 2 - 确保只要 JWT 过期，您就清除 cookie，并且每当客户端收到 401 时，您刷新您拥有的任何经过身份验证的 state 并将用户重定向到登录页面或任何不需要身份验证的页面。

Just to add to the selected answer.只是添加到选定的答案。

a loading component and an isLoading state will help prevent the split-second showing of authenticated / protected screens.一个加载组件和一个 isLoading state 将有助于防止瞬间显示已验证/受保护的屏幕。 ex, isLoading? <LoadingComponent />: <ProtectedComponent />例如， isLoading? <LoadingComponent />: <ProtectedComponent /> isLoading? <LoadingComponent />: <ProtectedComponent />

You can just update the isLoading state when the request finishes, and should the request yield an unauthenticated response code, you can then perform a redirect.您可以在请求完成时更新 isLoading state，如果请求产生未经身份验证的响应代码，则可以执行重定向。