Question

我已登录组件，该组件应该可供未经身份验证的用户使用。在身份验证之后，此组件应该变得不可用。

   var routes = (
      <Route handler={App}>
        <Route name="signIn" handler={signIn}/>
        {/* redirect, if user is already authenticated */}
        { localStorage.userToken ? (
            <Redirect from="signIn" to="/user"/>
          ) : null
        }
      </Route>
    );

Router.run(routes, (Handler, state) => {
  React.render(<Handler {...state}/>, document.getElementById('main'));
});

如果用户在身份验证后出于任何原因重新加载了webapp，则此代码非常有用，但当然如果用户没有重新加载webapp则不会。我已经尝试使用this.context.router.transitionTo权限来使用SignUp组件，但它工作得很糟糕 - 组件被渲染，然后这个脚本就会被执行。

所以我想将重定向添加到routes变量中，以使路由器重定向，甚至不用尝试渲染组件。

Answer 1

我建议采用另一种方法，而不是检查你的auth-flow并有条件地渲染特定的路线：

如果您正在使用react-router 0.13.x，我建议您在需要检查身份验证时使用组件上的willTransitionTo methods。当处理程序即将渲染时调用它，使您有机会中止或重定向转换（在这种情况下，检查用户是否经过身份验证，如果没有，则重定向到另一个路径）。请参阅此处的auth-flow示例：https://github.com/ReactTraining/react-router/blob/v0.13.6/examples/auth-flow/app.js

对于版本＆gt; 0.13.x，它将是onEnter和Enterhooks。请参阅此处的auth-flow示例：https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js

基本上，您将身份验证流程从routes变量移开，转移到转换事件/挂钩中。在路由处理程序实际呈现之前，请检查auth，并将用户重定向到另一个路由。

如何动态添加重定向到react-router？

1 个答案: