React JS：私有路由在重新加载时保留 uri

Question

假设用户直接加载了一个页面：http://localhost:3000/home/view，这是一个受保护的页面。

由于我使用react-google-login 和isSignedIn 为真，它使用useEffect 类型的机制来检查用户是否已经登录。

现在我的问题是，由于最初用户没有登录，它会将用户重定向到登录页面：http://localhost:3000/ 其中 useEffect 发生并验证 isLoggedIn 属性。

现在一旦验证完成，我希望用户被重定向到他正在浏览的页面http://localhost:3000/home/view，但在这种情况下，即使在验证后他仍然在http://localhost:3000/。我想在onSuccess 中添加一个回调，将用户重定向回他来自的页面。

这是我的登录页面 (http://localhost:3000/)：

import React from 'react';
import classes from './Login.module.scss';
import GoogleLogin from 'react-google-login';
import { processUserLogin, userData } from './slices/userSlice';
import { useDispatch, useSelector } from 'react-redux';
import { Redirect } from 'react-router-dom';
import Spinner from '../shared/ui-components/spinner/spinner';

export default function Login(props) {
  const dispatch = useDispatch();
  const user = useSelector(userData);
  const isPending = user.status === 'loading';
  const responseGoogleSuccess = (response) => {
    const payload = {
      operationType: 'configureUserAndGetDetails',
      payLoad: {
        email: response.profileObj.email,
        google_payload: response,
      },
    };
    dispatch(processUserLogin(payload));
  };
  const responseGoogleFailed = (response) => {
    console.log('User Login Failed = ', response);
  };
  return (
    <div className={classes.LoginPage}>
      {isPending && <Spinner />}
      {user.userSignedIn ? (
        <Redirect to={{ pathname: '/view', state: { from: props.location } }} />
      ) : (
        <GoogleLogin
          clientId={process.env.REACT_APP_GOOGLE_OAUTH_CLIENT_ID}
          buttonText='Login'
          onSuccess={responseGoogleSuccess}
          onFailure={responseGoogleFailed}
          cookiePolicy={'single_host_origin'}
          isSignedIn={true}
        />
      )}
    </div>
  );
}

这是我的App.js：

import React from 'react';
import './App.scss';
import { Route, Switch, withRouter, Redirect } from 'react-router-dom';
import Layout from './features/shared/hoc/Layout/Layout';
import LoginPage from './features/login-page/login';
import { FRONTEND_ROUTES } from './features/shared/backend/frontendRoutes';
import { ComponentRoutes } from './AppRoutes';
import { useSelector } from 'react-redux';
import { userData } from './features/login-page/slices/userSlice';
// import PrivateRoute from './features/shared/hoc/PrivateRoute/PrivateRoute';

function App(props) {
  const user = useSelector(userData);
  const isUserSignedIn = user.userSignedIn;
  let routes = (
    <Switch>
      <Route exact path='/view' component={ComponentRoutes.asyncView} />
      <Route exact path='/' component={LoginPage} />
      <Redirect to='/' />
    </Switch>
  );

  if (isUserSignedIn || false) {
    routes = (
      <Switch>
        <Route
          exact
          path={FRONTEND_ROUTES.CONFIG_PAGE}
          component={ComponentRoutes.asyncConfig}
        />
        <Route
          exact
          path={FRONTEND_ROUTES.CONFIG_PAGE_REST}
          component={ComponentRoutes.asyncConfig}
        />
        <Route
          exact
          path={FRONTEND_ROUTES.ADVERTISERS_PAGE}
          component={ComponentRoutes.asyncView}
        />
        <Route
          exact
          path={FRONTEND_ROUTES.VIEWS_PAGE}
          component={ComponentRoutes.asyncAdvertiserPage}
        />

        <Route
          exact
          path='/schedule'
          component={ComponentRoutes.asyncConstruction}
        />
        <Route exact path='/' component={LoginPage} />
        <Route path='/' component={ComponentRoutes.asyncNotFound} />
        <Redirect to='/' />
      </Switch>
    );
  }

  return (
    <div>
      <Layout>{routes}</Layout>
    </div>
  );
}

export default withRouter(App);

我该如何解决这个问题

Answer 1

我可以通过 Redirect 传递 props 来解决这个问题，如下所示：

<Redirect to={{ to: '/', prevPath: location.pathname }} />

然后在我的登录中使用相同的路径，如下所示：-

import React from 'react';
import classes from './Login.module.scss';
import { userData } from './slices/userSlice';
import { useSelector } from 'react-redux';
import { Redirect } from 'react-router-dom';
import Spinner from '../shared/ui-components/spinner/spinner';
import GoogleLoginPage from './GoogleLoginPage';

export default function Login(props) {
  const user = useSelector(userData);
  const isPending = user.status === 'loading';
  return (
    <div className={classes.LoginPage}>
      {isPending && <Spinner />}
      {user.userSignedIn ? (
        <Redirect
          to={{
            pathname: props.location.prevPath,
          }}
        />
      ) : (
        <GoogleLoginPage previousLocation={props.location} />
      )}
    </div>
  );
}