Question

我目前正在使用React和React Router V4实施身份验证/登录流程。但我正在努力找到一个有效的重定向＆＃34;架构＆＃34;实现我的想法。

情况如下：

如果用户未登录到我的系统，他/她应该重定向 to＆＃34; / login＆＃34;，并呈现特定的登录页面组件。这应该是系统的要求，以便我可以为我的应用程序共享注册和登录链接。
如果用户已登录，他/应该被重定向到用户最初想要访问的路线。

我目前的实施：

条目组件

export default class Entry extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <Router>
          <Routes />
        </Router>
    );
  }
}

路由组件（此处进行身份验证检查）

class Routes extends PureComponent {

  componentDidMount() {
    this.props.loadUser(); // async method (redux) loads the actual logged in user
  }
  render() {
    return (
      <Switch>
        <Route path="/login" render={() => (!this.props.user.username ? <LoginPage {...this.props}/> : <Redirect to="/app" />)} />
        <Route path="/app" render={() => (this.props.user.username ? <AppPage {...this.props} /> : <Redirect to="/login" />)} />
        <Route exact path="/" render={props => <Redirect to="/app" />} />
      </Switch>
    );
  }
}
export default Routes;

应用程序组件（此处嵌套路由）

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { match, user, logout } = this.props;
    return (
      <Switch>
         <Route path={`${match.path}/about`} component={About} />
         <Route path={`${match.path}`} component={Home} />
      </Switch>
    );
  }
}

现在发生以下情况时会出现问题：

用户已登录但已关闭我的应用程序的标签
用户现在想要访问/app/about
路线组件正在加载，但this.props.user.username为null
用户被重定向到/login
现在，异步方法this.props.loadUser()已更新了redux商店，this.props.user.username不再是null，然后用户被重定向到/app，但他原本想访问{ {1}}。

所以让我感到头痛的是

/app/about

我应该如何处理这种特定的方法，以便用户被重定向到他/她最初想要访问的URL？

也许我的整体方法有点奇怪。

提前致谢，我感谢每一位帮助:)

Answer 1

由于您正在使用react-router v4，我建议您访问他们关于此主题的优秀文档。 Here

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

const AuthExample = () => (
  <Router>
    <div>
      <AuthButton/>
      <ul>
        <li><Link to="/public">Public Page</Link></li>
        <li><Link to="/protected">Protected Page</Link></li>
      </ul>
      <Route path="/public" component={Public}/>
      <Route path="/login" component={Login}/>
      <PrivateRoute path="/protected" component={Protected}/>
    </div>
  </Router>
);

React Router Authentication Redirection

1 个答案: