ReactJS：无法为私有屏幕创建保护路由

Question

在客户端（React）我有一个受保护的路由，只有在用户登录时才能访问。

在 后端（Node.js，Express）中，我使用 JWT 并将其存储在 cookie 中 - 访问令牌和刷新令牌以对用户进行身份验证。访问令牌每 30 秒过期一次，刷新令牌用于重新创建访问令牌。

我要做的是为登录用户创建一个受保护的路由，通过检查accesToken cookie和refreshtoken cookie是否存在，以下是代码：

Auth.js

import axios from "axios";
import Cookies from "universal-cookie";
const cookies = new Cookies();

axios.defaults.withCredentials = true;
class Auth {
  constructor() {
    this.authenticated = false;
  }

  isAuthenticated() {
    const accessToken = cookies.get("authSession");
    const refreshToken = cookies.get("refreshTokenID");

    if (!accessToken && !refreshToken) {
      return (this.authenticated = false);
    }

    if (accessToken && refreshToken) {
      return (this.authenticated = true);
    }

    if (!accessToken && refreshToken) {
      axios
        .post("/api/auth/refresh", {
          withCredentials: true,
        })
        .then(function (res) {
          console.log(res.data);
          // window.location.reload();
        })
        .catch(function (error) {
          console.log(error.response);
        });
    }
  }
}

export default new Auth();

ProtectedRoutes.js

import { Route, Redirect } from "react-router-dom";
import Auth from "./Auth";

const ProtectedRoutes = ({ component: Component, ...rest }) => {
  console.log("????", Auth.isAuthenticated());

  return (
    <Route
      {...rest}
      render={(props) =>
        Auth.isAuthenticated() ? (
          <Component {...props} />
        ) : (
          <Redirect to="/loginRegister" />
        )
      }
    />
  );
};

export default ProtectedRoutes;

一切正常，我可以登录，cookie 会过期并在每 30 秒后重新创建。除非访问令牌过期并重新创建，否则Auth.isAuthenticated() 返回undefined。它仅在前 30 秒内返回 true（即仅在第一个访问 cookie 未过期之前），但是当我尝试刷新我的私人页面时，它会返回到 loginRegister 页面

cookies 也存在：

更新

我忘记添加我的 loginHandler 和 Privatescreen Route：

路线

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import LoginRegisterScreen from "../../screens/LoginRegisterScreen/LoginRegisterScreen";
import ProtectedRoutes from "../Protect/ProtectedRoutes";
import PrivateScreen from "../../screens/PrivateScreen/PrivateScreen";

const Body = () => {
  return (
    <Router>
      <Switch>
        <ProtectedRoutes exact path="/" component={PrivateScreen} />
        <Route exact path="/loginRegister" component={LoginRegisterScreen} />

      </Switch>
    </Router>
  );
};

export default Body;

loginHandler 在我的 loginRegisterScreen.js

中

const loginHandler = async (e) => {
    e.preventDefault();
    console.log("Login hander called");

    const config = {
      headers: {
        "Content-Type": "application/json",
      },
    };

    try {
      await axios.post(
        "/api/auth/login",
        {
          email: loginEmail,
          password: loginPassword,
        },
        config
      );
      history.push("/");
    } catch (error) {
      setLoginError(error.response.data.error);
      setTimeout(() => {
        setLoginError("");
      }, 5000);
    }
  };

更新 2

事实证明我仍然登录，如果我在浏览器中手动输入我的私人 URL（即http://localhost:3000/），它允许我访问它，只是，每当我的 cookie 过期时，Auth.isAuthenticated() 得到@987654342 @ 我被推回/loginRegister 路线。我应该怎么做才能使它成为true 而不是undefined。

更新 3

添加图片以便更好地理解：

1. 登录后，我的保护路线立即进入阳离子并打开私人屏幕。

2. 在我的访问令牌过期 30 秒后，如果我刷新页面，我会推回到 /loginRegister 路由，因为它在 Auth.isAuthenticated() 未定义。

3. 只有当我再次手动输入 URL 并输入时，它才会转到私有路由：

更新 4

得到未定义的错误

Answer 1

在 Auth.js 中，您在声明新的 accessToken 后不会返回任何内容。您可以像下面那样在此处返回 true；

...
 if (!accessToken && refreshToken) {
      axios
        .post("/api/auth/refresh", {
          withCredentials: true,
        })
        .then(function (res) {
          console.log(res.data);
          return (this.authenticated = true); // <-- this is a new piece of code here
          // window.location.reload();
        })
        .catch(function (error) {
          console.log(error.response);
        });
    }