万一其他人为此而苦苦挣扎，这就是我最终的选择：

1. 当用户尝试访问受保护的路由时，/login使用 React-Router重定向到。

首先定义一个<PrivateRoute>组件：

// App.jsx

const PrivateRoute = ({ component: Component, loggedIn, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props =>
        loggedIn === true ? (
          <Component {...rest} {...props} />
        ) : (
          <Redirect
            to={{ pathname: "/login", state: { from: props.location } }}
          />
        )
      }
    />
  );
};

然后将loggedIn属性传递给路由：

// App.jsx

<PrivateRoute
  loggedIn={this.props.appState.loggedIn}
  path="/poll/:id"
  component={ViewPoll}
/>

2. 在/login组件中，将之前的路由保存到 localStorage，以便我可以在身份验证后重定向回那里：

// Login.jsx

  componentDidMount() {
   const { from } = this.props.location.state || { from: { pathname: "/" } };
   const pathname = from.pathname;
   window.localStorage.setItem("redirectUrl", pathname);
}

3.在SocialAuth回调中，重定向到客户端的个人资料页面，添加userId和token作为路由参数

// auth.ctrl.js

exports.socialAuthCallback = (req, res) => {
  if (req.user.err) {
    res.status(401).json({
        success: false,
        message: `social auth failed: ${req.user.err}`,
        error: req.user.err
    })
  } else {
    if (req.user) {
      const user = req.user._doc;
      const userInfo = helpers.setUserInfo(user);
      const token = helpers.generateToken(userInfo);
      return res.redirect(`${CLIENT_URL}/user/${userObj._doc._id}/${token}`);
    } else {
      return res.redirect('/login');
    }
  }
};

4.在Profile客户端的组件中，从路由参数中取出userId和token，立即使用删除 window.location.replaceState，保存到localStorage。然后检查localStorage 中的redirectUrl。如果存在，重定向然后清除值

// Profile.jsx

  componentWillMount() {
    let userId, token, authCallback;
    if (this.props.match.params.id) {
      userId = this.props.match.params.id;
      token = this.props.match.params.token;
      authCallback = true;

      // if logged in for first time through social auth,
      // need to save userId & token to local storage
      window.localStorage.setItem("userId", JSON.stringify(userId));
      window.localStorage.setItem("authToken", JSON.stringify(token));
      this.props.actions.setLoggedIn();
      this.props.actions.setSpinner("hide");

      // remove id & token from route params after saving to local storage
      window.history.replaceState(null, null, `${window.location.origin}/user`);
    } else {
      console.log("user id not in route params");

      // if userId is not in route params
      // look in redux store or local storage
      userId =
        this.props.profile.user._id ||
        JSON.parse(window.localStorage.getItem("userId"));
      if (window.localStorage.getItem("authToken")) {
        token = window.localStorage.getItem("authToken");
      } else {
        token = this.props.appState.authToken;
      }
    }

    // retrieve user profile & save to app state
    this.props.api.getProfile(token, userId).then(result => {
      if (result.type === "GET_PROFILE_SUCCESS") {
        this.props.actions.setLoggedIn();
        if (authCallback) {
          // if landing on profile page after social auth callback,
          // check for redirect url in local storage
          const redirect = window.localStorage.getItem("redirectUrl");
          if (redirect) {
            // redirect to originally requested page and then clear value
            // from local storage
            this.props.history.push(redirect);
            window.localStorage.setItem("redirectUrl", null);
          }
        }
      }
    });
  }

这篇博文有助于解决问题。链接帖子中的 #4（推荐）解决方案要简单得多，并且可能在生产中运行良好，但我无法让它在服务器和客户端具有不同基本 URL 的开发中工作，因为一个值设置为 localStorage在服务器 URL 处呈现的页面将不存在于客户端 URL 的本地存储中

根据您的应用程序架构，我可以给您一些想法，但它们都基于基本原理：

后端处理身份验证后，您还需要在后端存储用户的状态（通过会话 cookie / JWT）

您可以为您的 Express 应用程序创建一个 cookie 会话存储，您需要正确配置以使用两个域（后端域和前端域）或为此使用 JWT。

让我们了解更多细节

使用 React 检查身份验证状态

您可以在 express 中实现一个端点调用/api/credentials/check，403如果用户未通过身份验证并且200如果是，则该端点将返回。

在您的 React 应用程序中，您必须调用此端点并检查用户是否已通过身份验证。如果未通过身份验证，您可以重定向到/loginReact 前端。

我使用类似的东西：

class AuthRoute extends React.Component {
    render() {

        const isAuthenticated = this.props.user;
        const props = assign( {}, this.props );

        if ( isAuthenticated ) {
             return <Route {...props} />;
        } else {
             return <Redirect to="/login"/>;
        }

    }
}

然后在你的路由器中

<AuthRoute exact path="/users" component={Users} />
<Route exact path="/login" component={Login} />

在我的根组件中，我添加

componentDidMount() {
    store.dispatch( CredentialsActions.check() );
}

凡CredentialsActions.check只是一个调用填充props.user的情况下，我们返回200的/credentials/check。

使用 express 来渲染你的 React 应用程序并在 React 应用程序中脱水用户状态

这个有点棘手。并且它假定您的 react 应用程序是从您的 express 应用程序提供的，而不是作为静态.html文件提供的。

在这种情况下，您可以添加一个特殊的<script>const state = { authenticated: true }</script>，如果用户通过身份验证，它将由 express 提供服务。

通过这样做，您可以：

const isAuthenticated = window.authenticated;

这不是最佳实践，但它是您的状态的水合物和再水化的想法。

参考 ：

1. Redux 中的水化/再水化
2. 补水/补水的想法
3. React / Passport 身份验证示例
4. cookie / Passport 身份验证示例