可以使用“onEnter”延迟组件渲染吗？

Question

我正在使用 React Router onEnter 属性来处理身份验证，如下所示，也如 "auth-flow" example 中所示。

   function requireAuth(nextState, replace, next) {
     Auth.validateToken()
       .then(() =>  {
         next();
       })
       .fail(() => {
         replace('/login');
         next();
       }); 
   }

   <Router history={history}>
      <Route path="/" component={App} >
        <IndexRoute
          component={Dashboard}
          onEnter={requireAuth}
        />
        <Route
          path="login"
          component={LogInForm}
        />
      </Route>
    </Router>

我正在使用onEnter 的异步回调功能，因为我的令牌验证需要服务器调用。

我遇到的问题是此示例中的Dashboard 组件在调用next() 之前渲染/安装。理想情况下，渲染会等到回调被触发。

我是否误解了它的工作原理？有没有办法延迟渲染路由组件，直到某些条件成立？

Answer 1

永远不要延迟路线渲染，您的用户应该得到更好的。

绝对有一种不同的方法可以做到这一点，那就是让您呈现的实际页面包含用于查看是否有人有权查看它的逻辑，起始 state 具有类似 authorized: false 之类的东西，并且你的回调开关使用this.setState({ authorized: resultFromCallback })。

该状态更改将导致 React 在您的页面上再次调用 render()，如果值不同，然后在您页面的 render() 函数中，您只需检查 this.state.authorized 以查看是否您应该向用户呈现一个 UI，其中包含他们应该作为匿名用户看到的所有位，或者他们应该作为授权用户看到的所有位。

...
  componentDidount() {
    whateverlib.checkForAuthorization(this.handleAuthorization);
  },
  handleAuthorization(authorized) {
    this.setState({ authorized });
  },
  render() {
    if(this.state.authorized) {
      return this.renderAuthorizedUI();
    }
    return this.renderAnonymousUI();
  },
...

还请记住，您的应用仍然只是在网页上运行的 JavaScript，那么为什么还要检查您加载的每个页面呢？您需要做的就是检查任何页面，存储该结果并完成。只要用户保持他们的标签页打开，他们的授权状态就不会自发地从一个 react-router 应用程序管理的页面更改为下一个，因此您可以使用应用程序全局跟踪器。

var authorizer = require('./lib/whatever-thing-you-wrote-for-this');

var YourPage = React.createClass({
  ...
  componentDidMount() {
    if (!authorizer.isAuthorized()) {
      authorizer.tryAuthorize(this.handleAuthorization);
    }
  },
  handleAuthorization() {
    this.forceUpdate();
  },
  render() {
    if(authorizer.isAuthorized()) {
      return this.renderAuthorizedUI();
    }
    return this.renderAnonymousUI();
  },
  ...
});