登录时重定向到上一个路径 - 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

我已经使用下面的代码成功地为两条路线做到了这一点，但不确定这是否是最好的方法

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 路由器

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屋！