React Router - PrivateRoute，登錄后重定向到原始目的地

Question

我在使用 React Router 進行登錄后重定向時遇到問題。

假設用戶嘗試導航到http://website.com/app/profile/2但被重定向到http://website.com/login因為他們的 Z21D6F40CFB511982E4424E0E250A9557 端點/app存在於 PrivateRoute 中。

登錄后，我希望將用戶定向到http://website.com/app/profile/2 ，但他們目前只重定向到/app 。

成功登錄后如何利用原始目的地進行重定向？

謝謝你的時間！

Answer 1

您可以像這樣從私人路線中檢查這一點：

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中有token，則重定向到他請求的頁面，如果沒有，則重定向到登錄頁面並將請求的路徑存儲在本地存儲中，然后登錄function登錄成功后可以查看這個

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

Answer 2

如果用戶未能通過身份驗證，您可以嘗試在 privateRoute 組件或您使用的任何存儲訪問路由名稱的組件中創建某種檢查。 （在將用戶重定向到登錄頁面之前存儲它）

然后在登錄function中，可以在重定向前檢查用戶的localstorage，如果他在localstorage中有值，就重定向到stores路由，否則重定向到主登錄后路由

編輯：選中此項以獲取路由名稱React Router v4 - How to get current route？

我通常使用它

this.props.location.pathname