我将尝试解释我使用 react-router 进行的高级认证。您将需要在服务器和客户端上实现，并且您需要自己做出一些决定。在这个例子中，我将使用redux 作为通量库。
首先，您需要一种机制来保护您的路线，我使用这样的高阶组件来做到这一点：
// '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)
}
这里的代码非常简单，它导出了一个函数，该函数需要一个 React 组件作为唯一参数。这个ChildComponent 是您要保护的组件。
hasAuthToken 属性是这里的控件，如果为真则渲染ChildComponent，否则渲染SignIn。请注意，如果您不关心 SEO，则此呈现 SignIn 的过程很好，但如果您确实关心搜索引擎索引您的受保护路线，您可能希望 redirect 用户登录路线。
最后 AuthenticatedComponent 连接到 redux 存储 session 状态，但这可以很容易地切换到使用您选择的任何其他通量库。简而言之，它订阅了session 上的更改。如果 hasAuthToken 的值发生变化，如果当前已安装，则组件将重新渲染。
现在是路线：
import { Route } from 'react-router'
import Container from './Components/Container'
import Private from './Components/Private'
import requireAuthentication from './Components/requireAuthentication'
export default (
<Route path='/' component={Container}>
<Route path='private' component={requireAuthentication(Private)}>
<Route path='other' component={...} />
</Route>
</Route>
)
在这里，我将requireAuthentication 方法（上面代码中的默认导出方法）与我想要保护的组件一起应用。这将阻止页面显示，除非 redux 存储 session.hasAuthToken 属性为 true，而是显示 SignIn 组件。
由于 react-router 组合路由的方式，嵌套在受保护组件下的其他路由也将受到保护。
在较高级别上，SignIn 组件应该只是一个具有正常<a href> 的页面（即不是 react-router Link）以开始 Oauth2 握手。 simple-oauth2 模块有一些关于如何实现 oauth2 服务器端的很好的例子，所以我不会在这里讨论。如果您按照这些示例进行操作，则您希望将用户链接到 app.get('/auth', function (req, res) {}) 端点。
在callback 端点中，您将希望以某种方式将token 持久化（例如到您的会话（express-session 将在此处提供帮助）或数据库），然后将用户重定向回您的反应应用程序。
现在您需要将您的会话放入服务器端的 redux 存储，以准备在客户端对其进行补充。 redux 文档在Server Rendering 页面上解释了如何执行此操作，特别是Inject Initial Component HTML and State 和The Client Side 部分。至少你需要一个像这样的对象：
{
hasAuthToken: (typeof req.session.token !== 'undefined')
}
当然，您的实际实现将完全取决于您如何存储令牌并将其提供给服务器端请求。
希望这能让您入门。同样的过程也可用于其他类型的身份验证，方法是将 Oauth2 链接替换为您的服务器作为 XHR 处理的用户名和密码表单。
祝你好运。