Javascript react路由器需要oauth 2客户端实现

我们已经从下面的代码库创建了自己的oauth 2服务器，并使用授权代码实现。

但我们正在尝试将oauth2客户端身份验证集成到web应用程序中，其中包括react路由器和flux实现

我们查看了许多git存储库，但没有找到合适的方法来实现这一点

是否有任何实施方案向我们指出如何实现这一目标

再次感谢

更新

我们正在查看下面的存储库，但仍然不清楚如何使事情正常工作。比如在哪里合并auth和oauth逻辑，以及在服务器/客户端创建什么

---

我将尝试解释我使用react路由器的高级take身份验证。您将需要在服务器和客户机上实现，您需要自己做出一些决定。对于这个示例，我将使用flux库

首先，您需要一个机制来保护您的路由，我使用一个高阶组件来实现这一点，如下所示：

// 'Components/requireAuthentication'

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import SignIn from './SignIn'

export default (ChildComponent) => {
  class AuthenticatedComponent extends Component {
    static propTypes = {
      hasAuthToken: PropTypes.bool.isRequired
    };

    render () {
      const { hasAuthToken } = this.props
      return (hasAuthToken
        ? <ChildComponent {...this.props} />
        : <SignIn />
      )
    }
  }

  const mapStateToProps = ({session}) => (session)

  return connect(mapStateToProps)(AuthenticatedComponent)
}

在这里，我将

requireAuthentication

方法（上面代码中的默认导出方法）应用于我要保护的组件。这将阻止页面显示，除非redux存储

会话.hasAuthToken

属性为true，而是显示

SignIn

组件

由于react路由器构成路由的方式，嵌套在受保护组件下的其他路由也将受到保护

在较高的层次上，

SignIn

组件应该是一个带有普通

模块的页面，其中有一些关于如何实现oauth2服务器端的很好的示例，所以我在这里不赘述。如果您遵循这些示例，那么您要将用户链接到的是
app.get（'/auth'，function（req，res）{}）
端点

在
回调
端点中，您将希望以某种方式持久化
令牌
（例如，到您的会话（此处将提供帮助）或数据库），然后将用户重定向回您的react应用程序

现在，您需要将会话放入服务器端redux存储，以便在客户端对其进行水合。redux文档在页面上解释了如何执行此操作，特别是和部分。至少您需要这样一个对象：

{
  hasAuthToken: (typeof req.session.token !== 'undefined')
}

当然，您的实际实现将完全取决于您如何存储令牌并将其提供给服务器端请求

希望这能让你开始。通过将Oauth2链接替换为服务器作为XHR处理的用户名和密码表单，同样的过程也可以用于其他类型的身份验证

祝你好运。
！！我看到下面的答案更多的是Oauth完成后保护路由的方法。我正在构建一个无服务器的react应用程序，在这里我处理react端本身的所有Oauth。事实上，在客户端或服务器中处理Oauth是有争议的！！我已经在reactJS中处理了google的身份验证。但是尝试验证开发人员提供的身份（我指的是自己的身份验证系统，与socialOauths不同）。我找不到任何定制Oauth的react客户端。我相信戈拉现在会处理好的。让我知道我们使用你的交易流程或任何回购协议Marc-你是冠军吗
{
  hasAuthToken: (typeof req.session.token !== 'undefined')
}