重定向到登录时的上一个路径-React Router v4 [英] Redirect to previous path on login - React Router v4

问题描述

我正在使用React Router v4并尝试实现一项功能，无论用户单击什么路由，他都会被带到登录页面，即如果他尚未登录.

I am using react router v4 and trying to implement a functionality where no matter what route the user clicks on, he gets taken to the login page i.e. if he is not logged in already.

但是登录后，他被重定向到他尝试在登录前访问的同一页面

but after login he is redirected to the same page he was trying to access before login

我已经成功使用以下代码对其中2条路线进行了此操作，但不确定这是否是最好的方法

I have managed to do that for 2 of the routes using the below code, but not sure if this is the best way to do this

<Route path="/dashboard" render={(props) => (
    auth ? 
    (<MainDash props={this.props} />) 
    : 
    (<Redirect to="/login"/>)
    )}
/>
<Route exact path="/customers" render={(props) => (
    auth ? 
    (<MainApp />) 
    : 
    (<Redirect to="/login"/>)
    )}
/>
<Route exact path="/staff" render={(props) => (
    auth ? 
    (<MainApp />)
    : 
    (<Redirect to="/login"/>)
    )}
/>
<Route path="/login" component={Login} />
<Route path="/logout" component={Login} />

现在，尽管这可以正常工作，但我不想为所有不同的路线一次又一次地重复相同的代码.所以有更好的方法吗?

Now, although this is working correctly, I dont want to repeat the same code again and again for all the different routes. so is there a better way to do this?

现在，注销后，它什么也没显示，我希望它显示登录页面.因此，我也添加了以下几行，以便用户注销后立即显示登录页面.

Now, after logging out, it wasnt showing anything and I wanted it to show the login page. therefore I added the below lines too, so it would show the login page as soon as the user logs out.

<Route path="/login" component={Login} />
      <Route path="/logout" component={Login} />

但是还有一个问题->尽管注销后它确实显示了登录组件(仍然将路由显示为'/logout')，但它使我回到了登录表单(这次的路由是'/login')，并且通过这种方式，登录名将我带到仪表板.现在，为什么会这样?

But there's one more problem -> although after logout it does display the login component,(still showing route as '/logout') but it brings me back to login form (this time route is '/login' ) and from this route the login takes me to the dashboard. Now, why is that happening?

在我仍在学习有关React Router的过程中，将感谢您的帮助

Would appreciate some help on this as I am still learning about react router

推荐答案

遵循此例如，您可以使组件PrivateRoute包裹Route，并在需要需要身份验证的路由时使用.

Following this example you can make a component PrivateRoute to wrap Route and use that whenever you need a route that requires auth.

这是示例中的组件代码.

This is the component code from the example.

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
            fakeAuth.isAuthenticated ? 
            (<Component {...props}/>) 
            : 
            (
              <Redirect to={{
                    pathname: '/login',
                    state: { from: props.location }
                }}
              />
            )
        )}
    />
)

这篇关于重定向到登录时的上一个路径-React Router v4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！