我會試圖解釋與反應，我的路由器高水平採取認證。您需要在服務器和客戶端上實施，並且您需要做出一些決策才能使自己成爲可能。在這個例子中，我將使用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)
}
這裏的代碼非常簡單，它輸出的是需要一個反應組件作爲一個功能唯一的論點。這ChildComponent是你想保護的組件。
hasAuthToken prop是這裏的控件，如果它是真的，那麼將會呈現ChildComponent，否則會呈現SignIn。請注意，如果您不關心搜索引擎優化，那麼呈現SignIn的這一過程很好，但如果您關心的是搜索引擎將您的受保護路線編入索引，則您可能希望redirect用戶登錄路線。
最後AuthenticatedComponent連接到還原存儲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>（即不響應路由器Link）的頁面以開始Oauth2握手。 simple-oauth2模塊有一些關於如何實現oauth2服務器端的很好的例子，所以我不會在這裏進入。如果您正在關注這些示例，那麼您希望將該用戶鏈接到端點app.get('/auth', function (req, res) {})。
在你將要持續的token不知何故callback端點（如您的會話（express-session將幫助在這裏），或到數據庫），然後將用戶重定向回您的應用程序的反應。
現在，您需要將您的會話導入服務器端的REDX存儲庫，以準備在客戶端進行水合。該redux文檔解釋瞭如何在Server Rendering頁面上執行此操作，特別是Inject Initial Component HTML and State和The Client Side部分。最起碼，你需要這樣的對象：
{
hasAuthToken: (typeof req.session.token !== 'undefined')
}
當然，你的實際執行情況將完全取決於你如何存儲的令牌，並把它提供給服務器端請求。
希望這會讓你開始。同樣的過程也可以用於其他類型的認證，也可以用服務器作爲XHR處理的用戶名和密碼來替換Oauth2鏈接。
好運。
!!我看到下面的答案更多的是在Oauth完成後保護路線的方法。我正在構建一個無服務器響應應用程序，我正在處理所有Oauth本身的反應。事實上，在客戶端或服務器端處理Oauth是有爭議的！我已經在reactJS中處理了谷歌身份驗證。但試圖驗證提供的開發人員（我的意思是自己的身份驗證系統，不像socialOauths）。我無法找到任何定製Oauth的反應客戶端。我相信戈拉現在會處理它。讓我知道我們使用https://github.com/zalando/oauth2-client-js –
You Marc - 是一個冠軍 – jit