如何在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关于客户端"安全性"的免责声明: