javascript - 如何在 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 并更新路由以使用它们。这些将检查用户 token 是否存在并呈现所需的内容，否则呈现您的 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关于客户端“安全”的免责声明: