React 中经过身份验证的导航

Question

我正在学习 React。我的 React 路由器代码如下所示

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
        <Route exact path="/" component={Login} />
        <Route exact path="/register" component={Register} />
        <PrivateRoute path="/dashboard" exact component={Dashboard} />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById('root')

我的私人路线如下

const PrivateRoute = ({ component: Component }) => (
    <Route
        render={props =>
            (Auth.isAuthenticated() ? ( <Component {...props} />) : (<Redirect to={{ pathname: '/',}}/>))
        }
    />
);

使用上面的代码我可以在登录后浏览登录页面（http://localhost:3000/）。但是成功登录后，如果有人尝试浏览登录页面，我需要重定向到 dashboard 页面。

我该怎么做？

Answer 1

创建类似于私有路由的visitor-only路由。如果用户通过身份验证重定向到仪表板，否则呈现目标组件。

const VisitorOnlyRoute = ({ component: Component }) => (
    <Route
        render={props =>
            (Auth.isAuthenticated() === false? ( <Component {...props} />) : (<Redirect to={{ pathname: '/dashboard',}}/>))
        }
    />
);

现在将此路由组件与您的 login/register 组件一起使用，如下所示：

<VisitorOnlyRoute path="/register" exact component={Register} />

Answer 2

感谢 Route 组件，您的 Login 组件正在获取 history 道具，您可以使用它启动重定向。

登录成功后调用history.push('/dashboard')即可。

/* In your `Login` component */
function doLogin() {
    somehowSendLoginApiRequest().((response) => {
        if (response.ok) {
            this.props.history.push('/dashboard');
        }
    });
}

React 中经过身份验证的导航

Authenticated navigation in React

reactjs

react-router-v4