我會試圖解釋與反應,我的路由器高水平採取認證。您需要在服務器和客戶端上實施,並且您需要做出一些決策才能使自己成爲可能。在這個例子中,我將使用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