reactjs - react 路由器身份验证重定向

Question

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

情况如下:

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

我目前的实现:

入口组件

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

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

Routes 组件(此处进行身份验证检查)

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;

App 组件(此处为嵌套路由)

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，我建议您阅读他们关于此主题的出色文档。 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>
);