javascript - 如何在我们的反应应用程序中获取 JWT cookie，如何检查用户是否登录我无法找到如何处理我的反应应用程序会话

在我说什么之前，你已经列入app.use(cookieParser())对index.js吗？因为如果没有，一旦你安装了它，你就会需要它npm i cookie-parser

但无论如何，有几件事：

您可以在 React 中创建PrivateRoute，据我所知，这往往可以很好地保护路由免受未经授权的用户的攻击。
您可以简单地将 an 存储isAuthenticated在stateor中localStorage：但是这将要求您绝对确保用户不应该仅仅更改state或添加isAuthenticated中的值localStorage而只是欺骗真实性（这是让我正确的时间最长）。

无论如何，我处理这个问题的方式是，当用户登录时access token（refresh token如果它不存在）从服务器生成并在httpOnlycookie 中发送到客户端，而这使得你可以正如Pavan在他的回答中指出的那样，不要在客户端使用 JavaScript 对它做任何事情（这通常是一件好事），您应该在发出请求res.status时使用它进行验证。fetch这是我的fetch请求的样子：

const login = async (user) => {
        const body = JSON.stringify(user);
        return fetch(loginURL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            credentials: 'include', //this is important
            body: body
        }).then(function(res) {
            if (res.status === 200) {
                const id = Date.now();
                localStorage.sid = id; //this is temporary
                return res.json()
            } else {
                return res.json()
            }
        })
         // you can ignore this part
        .then(async resp => {
            return resp
        })
}

旁注：您的浏览器会自动处理httpOnly您从服务器发送的 cookie，但是这些 cookiecredentials: 'include' 需要包含在您的后续fetch请求中。

在我的主要父组件之一中，该login函数被调用：

login = async (user) => {
  this.setState({ error: null });
  await adapter.login(user).then(data => {
    if (!data.error) {
      this.setState({session: "active"})
    } else if (data.error && data.error.status === 401) {
        // this is so I can handle displaying invalid credentials errors and stuff
        this.setState({ error: data.error, loading: false });
    }
  });
}

我还在服务器端有一个middleware在路由中的任何代码之前运行的服务器端，以验证发出请求的用户是否实际获得授权。这也是我处理access token到期的原因；如果access token已过期，我使用refresh token生成一个新的access token并将其发送回httpOnlycookie，再次以 200 的状态发送，因此用户体验不会不和谐。这当然意味着你的refresh token寿命必须比你的长access token（我还没有决定我的情况要多久，但我想是 7 天或 14 天），但据我所知，这是可以的做。

最后一件事，我之前提到的父组件调用了一个 validate 函数，它是一个fetch对服务器的请求，componentDidMount以便在每次安装组件时验证用户，然后我已经包含了一些条件渲染：

    render() {
        return (
          <div className="container">
          {
            !localStorage.sid && <LoginForms {...yourPropsHere}/>
          }       
          {
            this.state.loading && <Loading />
          }
          {
            localStorage.sid && this.state.session === "active" && <Route path="/" render={(props) => <Root error={this.state.error} {...props}/>}/>
          }
          </div>
        );
    }

我已经走了条件渲染路线，因为我无法PrivateRoute在我拥有的时间内正常工作，但两者都应该没问题。

希望这会有所帮助。

javascript - 如何在我们的反应应用程序中获取 JWT cookie，如何检查用户是否登录我无法找到如何处理我的反应应用程序会话

问题描述

解决方案

推荐阅读