反應路由器和身份驗證

我是新來反應和學習如何作出反應 - 路由器實現路由。作爲我的示例應用程序的一部分，我試圖在每個作爲網站一部分的路徑上添加一個身份驗證器。我下面這個例子：https://github.com/reactjs/react-router/blob/master/examples/auth-flow/app.js 反應路由器和身份驗證

這裏是我的示例代碼：

render(
    <Router history={browserHistory}> 
    <Route path="/" component={App} onEnter={requireAuth}> 
     <IndexRoute component={Home}/> 
     <Route path="login" component={Login}/> 
     <Route path="logout" component={Logout}/> 
     <Route path="about" component={About}/> 
     <Route path="inbox" component={Inbox}/> 
    </Route> 
    </Router>, 
    document.getElementById("app"));

這裏是什麼requireAuth做：

function requireAuth(nextState, replace) { 
    if(!auth.isUserLoggedIn()) { 
    replace({ 
     path: "/login", 
     state: {nextPathname: nextState.location.pathname} 
    }); 
    } 
}

之間的區別是什麼我做什麼該示例確實是該示例僅將auth功能放在一個路由（儀表板）上，因爲我希望將它放在每條路由上。但這個例子停止工作，並開始拋出錯誤說：「最大調用堆棧大小超出」，我認爲是正確的，因爲/登錄是/的子路由，因爲requireAuth重定向到子路由，它只是嘗試再次驗證，並繼續嘗試永遠。我可能在這裏錯過了一個簡單的解決方法來實現這個目標，但我無法確定什麼是最好的方法。我能做些什麼來在網站的每個級別啓用身份驗證？

來源

2016-08-05 KumarM

你可以改變你的路線，這樣，不需要登錄的頁面，可以無需認證的呈現，如：

render(
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Home}/> 
     <Route path="login" component={Login}/> 
     <Route path="logout" component={Logout}/> 
     <Route path="about" component={About}/> 
     <Route path="inbox" component={Inbox} onEnter={requireAuth}/> 
    </Route> 
    </Router>, 
    document.getElementById("app"));

如果用戶已經的loggedIn requireAuth沒有做任何事情，你的收件箱組件已呈現。

來源

2016-08-05 03:42:08

謝謝，我也看到了這個例子。但正如我在我的問題中提到的那樣，我想讓每條路徑都可以在訪問之前進行身份驗證。因此，需要在每條路線上啓用它（試圖避免明確地將onEnter方法放在登錄以外的每個路線上）。 – KumarM

@DemoUser的回答幾乎正確，@KumarM如果您需要通過身份驗證才能看到登錄頁面，您可以如何登錄？這裏是你可以做什麼

render(
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="login" component={Login}/> 
     <Route path="logout" component={Logout}/> 
     <Route path="/dashboard" onEnter={requireAuth} > 
     <IndexRoute component={Home}/> 
     <Route path="about" component={About}/> 
     <Route path="inbox" component={Inbox} /> 
    </Route> 
    </Route> 
    </Router>, 
    document.getElementById("app"));

這裏發生了什麼？

登錄和註銷頁面不需要進行身份驗證
儀表板的所有子組件會自動進行身份驗證

來源

2016-08-05 06:04:46 abhirathore2006

我很樂意接受這個答案，但正如我上面提到的，我不想在中間創建另一條路徑，以便獲得我需要做的事情。 – KumarM

有沒有辦法你可以把身份驗證放在根目錄下，如果你還想這樣做的話，那麼你可以試試如果條件取決於當前路徑並返回組件，但這不是一個好方法 – abhirathore2006

我想你一定是想通了現在，但我今天這個偶然發現，所以我想分享一下：

如果你堅持保護你的應用程序的每個資源，我會建議你三思。 What @ abhirathore2006說的是：你的應用程序的用戶不應該被認證來訪問登錄組件。他們應該嗎？

如果您認爲「最大調用堆棧大小增加」是因爲無限重定向發生，並且您可以嘗試通過執行空檢查或其他操作來避免它，那麼您是正確的。

問題是，您只需將onEnter掛鉤放置在/ logout，/ inbox &/about組件上並保持原樣。否則，您可以嘗試將這些組件包裝在HOC中，或者使用較新的react-router4方法來獲得您所需的內容。

希望這會有所幫助！

乾杯！

來源

2017-07-11 09:28:10 Hawkes

反應路由器和身份驗證

回答

相關問題