我有一个连接到API的React应用程序。我正在使用React-Router，并尝试实现身份验证检查，以便在未使用API进行身份验证的情况下将用户重定向到登录页面。下面是App.js的路由部分：

...

  render() {
    return (
      <div className="Margins">
        <BurgerMenu
          isAuthenticated={this.state.isAuthenticated}
          logoutCallback={this.logoutCallback}
        />
        <Routes>
          <Route
            path="/"
            element={
              <AuthenticationRequired
                isAuthenticated={this.state.isAuthenticated}
                setAuthenticationCallback={this.setAuthenticationCallback}
              >
                <Home />
              </AuthenticationRequired>
            }
          />
          <Route
            path="/product"
            element={
              <AuthenticationRequired
                isAuthenticated={this.state.isAuthenticated}
                setAuthenticationCallback={this.setAuthenticationCallback}
              >
                <Product />
              </AuthenticationRequired>
            }
          />
          <Route
            path="/login"
            element={
              <Login
                setTokenCallback={this.setTokenCallback}
                isAuthenticated={this.state.isAuthenticated}
              />
            }
          />
          <Route path="/contact" element={<Contact />} />
          <Route path="/register" element={<Register />} />
        </Routes>
      </div>
    );
  }
}

export default App;

字符串
有两个经过身份验证的端点："/"和"/product"中的至少一个。AuthenticationRequired组件如下所示：

import {Component} from "react";
import { Navigate } from "react-router-dom";
import axios from "axios";
let config = require("../config.json");

class AuthenticationRequired extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isAuthenticated: props.isAuthenticated,
      setAuthentication: props.setAuthenticationCallback
    };
  }

  checkAuthentication() {
    if (this.props.isAuthenticated) return;
    console.log("check authentication")
    axios.get(config.AUTHENTICATION_CHECK_URL,
      { withCredentials: true }
    )
      .then((response) => {
        this.props.setAuthenticationCallback(true);
      })
      .catch((error) => {
        this.props.setAuthenticationCallback(false);
      })
  }

  render() {
    this.checkAuthentication();
    if (this.props.isAuthenticated) return this.props.children;
    return <Navigate to="/login" replace />;
  }
}

export default AuthenticationRequired;

型
因此，它基本上是通过调用API来检查用户是否经过身份验证。如果会话cookie有效，服务器将发送200响应代码，并允许用户访问路由。当连接到"/"路由时，它按预期工作。然而，当尝试访问"/product"时，.then函数从未被执行，因此我最终被重定向到登录页面。我检查了我的浏览器的网络选项卡，一个get请求被发送到服务器，服务器用200状态码回复，所以我希望.then被执行，但它没有。我不明白这是怎么回事。