React路由器-PrivateRoute，登录后重定向到原始目的地

Question

我在使用React路由器进行登录后重定向时遇到问题。

假设用户试图导航到http://website.com/app/profile/2但被重定向到http://website.com/login因为他们的会话已过期。endpoint/app存在于PrivateRoute中。

登录后，我希望用户被引导到http://website.com/app/profile/2，但相反，他们目前只重定向到/app。

成功登录后，如何利用原始目的地进行重定向？

谢谢你的时间！

Answer 1

您可以尝试在privateRoute组件或您正在使用的任何组件中创建某种类型的检查，如果用户未能进行身份验证，则该检查将存储访问的路由的名称。（将其存储在将用户重定向到登录页面之前）

然后在登录函数中，您可以在重定向之前检查用户的localstorage，如果他在localstorage中有值，则将他重定向到stores路由，否则重定向到主登录后路由

编辑：选中此项以获取路由名称React Router v4-如何获取当前路由？

我通常使用

this.props.location.pathname

Answer 2

您可以通过如下方式从专用路径检查此项：

const PrivateRoute = ({component: Component, ...rest}) => {
    let token = localStorage.getItem('token');
    let pathname = this.props.location.pathname;

    if(!token && pathname != '/login'){
       localStorage.setItem('redirectTo', pathname);
    }
    
    return (<Route {...rest} render={(props) => (
            token
                ? <Component {...props} />
                : <Redirect to='/login'/>
        )}/>
    );
};

这样，如果用户在localStorage中有一个令牌，则重定向到他请求的页面，如果没有，则重定向到login页面并将请求的路径存储在local storage中，然后在登录函数成功登录后，您可以检查这一点

let redirectTo = localStorage.getItem('redirectTo');
if(redirectTo ){
    window.location.href = redirectTo;
}