身份驗證組件作爲反應中的中間件

如何確保只有登錄的用戶才能訪問主頁和任務頁？我使用的是redux，我儘量避免使用任何預先創建的auth組件來更好地學習auth。身份驗證組件作爲反應中的中間件

const App = props => (
    <BrowserRouter> 
     <Provider store={store}> 
      <div className="app"> 
       <Layout> 
       <Header> 
        <Navbar /> 
       </Header> 
       <Content> 
        <Route exact path='/' component={Home} /> 
        <Route exact path='/login' component={Login} /> 
        <Route exact path='/signup' component={Signup} /> 
        <Route exact path='/task/:id' component={Task} /> 
       </Content> 
       </Layout> 
      </div> 
     </Provider> 
    </BrowserRouter> 
)

我正在使用角度和路線中有中間件的概念，但在作出反應我迷路了。我認爲auth與redux的商店無關？當用戶瀏覽應用程序時，是否需要調用以獲取用戶詳細信息的api？

來源

2017-08-27 Jenny Mok

爲了在我們的應用程序中解決這個問題，我們使用了一個更高階的組件並且封裝了我們的根應用程序路由。我們的路線結構有點不同，但對於任何需要「保護」的路線，您都可以使用相同的概念。

高階組件只是「擴展」了組件的功能。 Redux的 connect是一個HOC。在這種情況下，擴展功能將檢查身份驗證。當組件坐騎，你想使你的認證檢查，無論是檢查服務器或本地存儲，等建立一個新的組件文件，像這樣：

import React from 'react' 

export default function(ComposedComponent) { 

    class RequireAuth extends Component { 

    state = { 
     isAuthenticated: false 
    } 

    // Push to login route if not authenticated on mount 
    componentWillMount() { 
     if(!this.state.authenticated) { 
     // Use your router to redirect them to login page 
     } 
    } 

    // Push to login route if not authenticated on update 
    componentWillUpdate(nextProps) { 
     if(!this.state.authenticated) { 
     // Use your router to redirect them to login page 
     } 
    } 

    // Otherwise render the original component 
    render() { 
     return <ComposedComponent {...this.props}/> 
    } 

    } 

    return RequireAuth 

}

在你的路由文件，只需導入HOC爲RequireAuth或類似的東西，並使用像這樣：

<Route exact path='/' component={RequireAuth(Home)} />

這或多或少會執行以下操作：當你的路由器打回家的路線，它運行RequireAuth檢查，當它試圖呈現路線的組成部分。 RequireAuth將需要檢查您設置的某種認證，並將isAuthenticated狀態設置爲true。如果不是這樣，它應該重定向到您的登錄路線或類似的東西。您也可以使用connect這個HOC來代替組件狀態來保存isAuthenticated狀態。

來源

2017-08-27 13:49:13

每次用戶導航應用程序時，我都必須調用api嗎？或者我只是簡單地檢查localstorage中的用戶對象？ –

我不會每次都調用API，不。只需存儲身份驗證狀態即可繼續使用而不會出現問題。如果你需要一個更「安全」的應用程序，比如一個銀行可以在X時間不活動或什麼之後註銷你，你可以設置一個函數來再次點擊你的API，以便檢查。 –

我們通常只會首次執行登錄檢查'onEnter'路線。由於它是一個單頁面應用程序，除非用戶刷新頁面，否則它只會觸發一次檢查。 –

身份驗證組件作爲反應中的中間件

回答

相關問題