Route Protection

• 假如我們想要保護一個route不讓它隨意進入，一個基本的做法是在那個route設定一個onEnter( )的callback當作prop，當要進入這個route之前呼叫它。它接收nextState以及一個replace參數，這個replace參數可以幫助我們取得想要進入的route，或是當使用者未經授權時取得取得轉到其他地方的route。

• 來看一個例子，這裡有兩個主要的route，若你想進入feed但沒有得到授權，checkAuth應該會執行，你將被帶到' / '或是main index page。

<Router history={hashHistory}>
  <Route path='/' component={MainContainer}>
    <Route path='feed' component={FeedContainer} onEnter={checkAuth} />
    <Route path='logout' component={LogoutContainer} />
    <IndexRoute component={HomeContainer}/>
  </Route>
</Router>

• 接著看看checkAuth會是怎樣，它會接收nextState跟replace參數，nextState用來取得想要進入的route路徑名稱，replace則是用來做redirect。在這個例子裡面，若使用者未經授權則會被轉到home view。

function checkAuth (nextState, replace) {
  if (nextState.location.pathname === '/feed') {
    if (isAuthed() !== true) {
      replace('/')
    }
  }
}