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

Question

我有一個使用Firebase的登錄系統，如果有人輸入正確的信息，我想動態添加路線，我希望它添加主路線和添加路線。

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'));

上面的代碼工作正常，但是當有人輸入正確的信息時，它有一個缺陷，他們必須重新加載頁面並再次輸入信息才能登錄。

有成功的身份驗證后，他們不必重新加載頁面嗎？

Answer 1

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

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關於客戶端“安全性”的免責聲明：

Answer 2

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

免責聲明：由於任何人都可以訪問源代碼並將行更改為{ true ? <Route path="add" component={Add} /> : null } { true ? <Route path="add" component={Add} /> : null } ，但仍然是一種很酷的方法。