如何在React.JS中有條件添加路線？

我有一個Firebase登錄系統，如果有人輸入正確的信息，我想動態添加路線，我希望它添加主路線和添加路線。如何在React.JS中有條件添加路線？

var userToken = 'firebase:authUser:AIzaSyDfC9LqfL1rbClhfCOD04BKC9ZIn7UAZ_g:[DEFAULT]'; 

ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path="/" component={Login} /> 
     <Route path="signup" component={Signup} /> 
     { localStorage.getItem(userToken) ? (
      <Route path="main" component={Main} /> 
     ) : (<Redirect from="main" to="/" />) 
     } 
     { localStorage.getItem(userToken) ? (
      <Route path="add" component={Add} /> 
     ) : null 
     } 
     <Route path="main" component={Main} /> 
     <Route path="*" component={NotFound} /> 
    </Router> 
    , document.getElementById('container'));

上面的代碼工作正常，但它也有缺陷，當有人類型的正確的信息，他們必須重新加載頁面，然後再次輸入信息進行登錄。

有沒有解決任何方式在成功認證後他們不必重新加載頁面？

來源

2016-12-05 Osama Xäwãñz

我建議創建組件SecureMain和SecureAdd並更新路線以使用它們。這些將檢查用戶令牌的存在並呈現所需的內容，否則將呈現您的組件。例如（請注意，我撞了這一點作爲一個概念，它可能不是完美的）：

import React from 'react'; 
import Main from './Main'; 
import NotFound from './NotFound'; 

export default class SecureMain extends React.Component { 
    constructor(...args) { 
    super(...args); 
    this.state = { token: localStorage.getItem(userToken) }; 
    } 
    render() { 
    if (this.state.token) return <Main {...this.props} />; 
    else return <NotFound {...this.props} />; 
    } 
}

這使得你的應用程序的狀態更容易根據其狀態來預測。

當然我也有呼應有關客戶端‘安全’@ZekeDroid聲明：

來源

2016-12-05 16:35:07

這是一個有趣的身份驗證方法。很有意思。我的建議是給你添加Redux或直接將你的Router包裝在父組件中。這樣，當用戶觸發我認爲是某個onChange處理程序時，它應該只更新該父項的狀態而不是localStorage。此時，該父母將重新給其子女（在您的情況下爲Router），因此會生成新的Routes！

免責聲明：它仍然很容易繞過此認證，因爲任何人都可以去源和改變線讀取{ true ? <Route path="add" component={Add} /> : null }，但仍然，有點酷的方法。

來源

2016-12-05 16:07:02 ZekeDroid

所以不要出於安全原因，但是對於實用性的原因這樣做： - ） –

指向你的「免責聲明」，雖然我們可以繞過這個認證，但是當使用組件來添加一些東西時，我認爲必須在服務器端驗證用戶的真實性。 – MoolsBytheway

當然，但除非服務器是重新路由的那個，那麼它仍然是不安全的 – ZekeDroid

如何在React.JS中有條件添加路線？

回答

相關問題