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

Question

我目前正在使用 React 和 React Router V4 实施 authentication/login 流程。但我正在努力寻找一个有效的重定向 "schema" 来实现我的想法。

情况如下：

如果用户 未登录 我的系统 he/she 应该得到重定向到“/login”，并呈现特定的登录页面组件。这应该是系统的要求，这样我就可以分享我的应用程序的注册和登录链接。
如果用户登录 he/should 应该被重定向到用户最初想要访问的路由。

我当前的实现：

入门组件

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;

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

出现以下情况时会出现问题：

用户已登录但关闭了我的应用程序的选项卡
用户现在想访问/app/about
路线组件正在加载，但 this.props.user.username 是 null
用户被重定向到 /login
现在异步方法 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 he/she 最初想访问的页面？

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

提前致谢，非常感谢您的帮助:)

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

authentication

reactjs

react-router

react-router-v4