基于登录状态重定向到不同的组件

Question

我正试图解决反应路由器v4中的重定向问题.如果用户登录，我希望重定向到仪表板组件，如果我到达path="/“，则在用户注销时重定向到注册组件。

 <Switch>
   <Route exact path="/" component={Login} />    
   <PrivateRoute path="/dashboard" component={Dashboard}></PrivateRoute>
   <Redirect from='*' to='/404' />
 </Switch>

提前谢谢。

Answer 1

authenticate() {
    //do something to check if logged in
    if (loggedIn) {
         this.setState({ isAuth: true })
    }
}    

<Router>
    <Switch>
            <Route path="/" render={props => ( 
                <Login 
                auth={this.authenticate} 
                /> 
            )}/>
            {this.state.isAuth ?
                <Route path="/dashboard" component={Dashboard}/>
                />
            ) : <Redirect to='/' />}
    </Switch>
</Router>

然后在登录组件中执行如下操作：

<Link to="/dashboard"><button onClick={() => this.props.auth()}>Sign In</button></Link>

Answer 2

如果我理解正确的话，这些案例是：

1. 经过身份验证的用户访问登录页=>重定向到仪表板
2. 未经身份验证的用户访问仪表板=>重定向到登录页面
3. 未经身份验证的用户访问(或重定向到) 404 =>重定向到登录页面
4. 未经身份验证的用户退出=>重定向到登录页面。

对于1，如果用户经过身份验证，请签入componentDidMount of login，如果是，请重定向到仪表板。

对于componentDidMount中的2和3，这一次如果用户没有经过身份验证，则重定向到登录。

对于4，在logout内部将用户重定向到login页面。

我不知道您是如何存储身份验证数据的，因此我无法提供确切的示例代码。

Answer 3

您可以检查用户是否登录PrivateRoute，并根据此值重定向到"/login“页面或从道具返回组件。

PrivateRoute组件示例：

const mapStateToProps = createStructuredSelector({
    isLoggedIn: makeSelectIsLoggedIn(),
});

@connect(mapStateToProps)
export default class PrivateRoute extends React.Component {
    render() {
        const {isLoggedIn} = this.props;

        return isLoggedIn
            ? <AppLayout {...this.props}/>
            : <Redirect to={routePaths.LOGIN}/>;
    }
}

PublicRoute组件：

const mapStateToProps = createStructuredSelector({
    isLoggedIn: makeSelectIsLoggedIn(),
});

@connect(mapStateToProps)
export default class PublicRoute extends React.Component {
    render() {
        const {isLoggedIn} = this.props;

        return isLoggedIn
            ? <Redirect to={routePaths.DASHBOARD}/>
            : <AppLayout {...this.props}/>;
    }
}

和路线：

<Switch>
    <Route exact path={routePaths.ROOT} component={Login} />
    <PublicRoute path={routePaths.LOGIN} component={Login}/>
    <PrivateRoute path={routePaths.DASHBOARD} component={Dashboard}/>
    <Route component={NotFound}/>
</Switch>