反应路由器身份验证重定向

Question

我目前正在使用React和实现身份验证/登录流程React Router V4。但我正在努力寻找一个有效的重定向“模式”来实现我的想法。

情况如下：

1. 如果用户没有登录到我的系统，他/她应该重定向到“/login”，并呈现特定的登录页面组件。这应该是系统的要求，以便我可以共享我的应用程序的注册和登录链接。
2. 如果用户登录，他/应该被重定向到用户最初想要访问的路线。

我目前的实现：

入口组件

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>
    );
  }
}

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

1. 用户已登录但已关闭我的应用程序的选项卡
2. 用户现在想要访问 /app/about
3. 路由组件加载，但是this.props.user.username是null
4. 用户被重定向到 /login
5. 现在异步方法this.props.loadUser()已经更新了Redux商店，this.props.user.username是不是null再然后用户被重定向到/app，但他原本想访问/app/about。

所以让我头疼的那一行是

<Route path="/login" render={() => (!this.props.user.username ? <LoginPage {...this.props}/> : <Redirect to="/app" />)} />

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

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

在此先感谢，我感谢每一个帮助:)

Answer 1

由于您使用的是 react-router v4，我建议您查看有关此主题的精彩文档。这里

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>
);