在 React 中，如何确定 oauth 登录何时成功？

Question

我目前正在学习 React，我认为这是一个对这里的专业人士来说很简单的问题。在一个 React 组件中，我有一个简单的锚标记，它路由到我的 google oauth 路由：

<a href='/auth/google'>Sign In</a>

Express 服务器使用 passport 和 express-session 处理这个问题，但是我这样做的方式没有从服务器获得响应，如果登录完成，我可以使用它来设置状态。相反，成功登录只会重定向到主页。

用户已登录，但我的UI不知道。

我的想法是我需要组件中的一些功能，例如：

login(e) {
  fetch('/auth/google')
    .then((response) => this.setState({isLoggedIn:...})
}

但这只会获取该页面，而不是将用户引导至该页面。我是否需要制作一个函数来查询服务器以查看每次加载组件时会话是否存在？

为清楚起见编辑：

当 oauth 成功时，这是重定向用户主页的样板代码：

router.get('/google/callback', 
  passport.authenticate('google', { prompt: 'consent', failureRedirect: '/login', }),
  function(req, res) {
    // Successful authentication, redirect home.
    res.redirect('/');
});

虽然该重定向工作正常，但我不知道如何监听该响应的会话 information/data？ UI 从锚标记触发了一个 GET，那么我该如何在响应中设置状态？

Answer 1

据我所知，您正在使用护照来验证您服务器上的用户，而不是客户端。

如果您已经附加了会话，那么您的/客户端代码可能会发出 ajax 到达服务器 /isAuthenticated 然后 return true，或 false，或本地集进一步使用凭据。

当对 ajax 调用的响应到达您的客户端时，您会在您的状态下记住它，然后应用程序将重新呈现为登录状态。

或者，如果您不需要服务器端 google 身份验证，您可以使用来自您的 React 应用程序的 Google client library for javascript，然后当您从 Google 获得凭据时，通过 ajax 调用服务器，并可能将它们交换为本地凭据，以便在进一步与您的服务器通信时使用。

在 React 中，如何确定 oauth 登录何时成功？

In React, how can I determine when an oauth login was successful?

reactjs

oauth

passport.js

express-session