Reactjs 验证后加载用户时出现问题

我在加载经过身份验证（登录）的用户时遇到问题，我使用jwt进行身份验证（使用localStorage存储令牌）。。。一旦用户成功登录，他将被重定向到主页，工作正常，但当我重新加载页面时，页面将被重定向到登录页面。。。但理想的功能是，若他重新加载了一个身份验证，他不应该重定向登录，它应该重新加载主页，直到用户点击注销。。。这是我的密码…我不知道哪里出错了

这是登录功能

 const loginUser = async (userInfo) => {
setLoading();
const config = {
  headers: {
    "Content-Type": "application/json",
  },
};
try {
  const res = await axios.post("/api/auth", userInfo, config);
  console.log(res.data);
  dispatch({ type: LOGIN_SUCCESS, payload: res.data });
  loadAuthenticatedUser();
} catch (err) {
  console.log(err.response.data.errors);
  dispatch({ type: LOGIN_FAIL, payload: err.response.data });
}

})

这是loadAuthenticatedUser函数：我在Homepage组件中调用了此函数，您可以看到上面的loginUser函数，我在成功请求后调用了它

const loadAuthenticatedUser = async () => {
setLoading();
//set global header to check token exist if exist setToken
if (localStorage.token) {
  setToken(localStorage.token);
}
try {
  const res = await axios.get("/api/auth");
  console.log(res);
  dispatch({ type: LOAD_AUTHENTICATED_USER, payload: res.data });
} catch (err) {
  console.log(err.response.data);
  dispatch({ type: LOAD_AUTH_ERROR, payload: err.response.data });
}

})

这是我的

case LOGIN_SUCCESS:
  localStorage.setItem("token", action.payload.token);
  return {
    ...state,
    isAuthenticate: true,
    loading_State: false,
    user_State: action.payload.token,
  };

case LOAD_AUTHENTICATED_USER:
  return {
    ...state,
    isAuthenticate: true,
    loading_State: false,
    user_State: action.payload,
  };
case REGISTER_FAIL:
case LOGIN_FAIL:
case LOAD_AUTH_ERROR:
  localStorage.removeItem("token");
  return {
    ...state,
    error_State: action.payload.errors,
    isAuthenticate: false,
    loading_State: false,
    token_State: null,
    user_State: null,
  };

case LOGOUT:
  localStorage.removeItem("token");
  return {
    ...state,
    isAuthenticate: false,
    loading_State: false,
    token_State: null,
    user_State: null,
  };

case CLEAR_AUTH_ERRORS:
  return {
    ...state,
    error_State: null,
    user_State: null,
    loading_State: false,
  };
case SET_LOADING:
  return {
    ...state,
    loading_State: true,
  };

default:
  return {
    ...state,
  };

}

导出默认值

在主页组件中：

useEffect(() => {
if (isAuthenticate && !loading_State) {
  loadAuthenticatedUser();
}
clearAuthErrors();
// eslint-disable-next-line

}，[isAuthenticate，加载状态]

这是我的app.js文件 呈现：

返回(
（使用react-dev工具）登录时：

当我重新加载时，isAuthenticate值设置为false，但在authReducer中，您可以看到我在加载\u AUTHENTICATED\u用户的情况下将其设置为true…我在主页和authState中调用了一个函数，当我成功登录时…但它没有应用…这是状态，如果我在主页中重新加载

在浏览器刷新时，除非明确保持，否则应用程序状态（组件状态和redux存储）将完全重置：所有变量内容将被删除。

在您的情况下，您应该确保PrivateRoute在状态刚刚重置时不会重定向。为此，您应该将
加载状态
初始化为true。
当我重新加载页面时，页面被重定向到登录页面
您的问题中没有任何代码会重定向用户。我添加了代码…您可以在e..正如您在问题中提到的，“当我重新加载页面时，页面将重定向到登录页面”。您需要在应用程序加载时尝试通过从存储中获取令牌来验证用户。在主页中，您将检查用户是否已验证，但这将永远不会返回true，因为您的所有状态都将在加载后重置刷新。您需要使用
componentDidMount（）在app.js中运行您的
loadAuthenticatedUser（）
如果您不确定如何处理此问题，我可以给您一个示例答案。如果我是您，我会登录，然后检查开发人员工具，查看令牌是否确实存储在本地存储中。我注意到您编写了大量与令牌相关的代码，但没有实际测试令牌存储是否实际工作。这是一个错误ke也是。您所说的是正确的，但将loading_State设置为true不起作用…很抱歉听到这个消息。如果您需要更多帮助，我建议您制作一个最小且可复制的示例，如下所述：
 return (
<AuthState>
  <ProfileState>
    <PostState>
      <AlertState>
        <Router>
          <Fragment>
            <Navbar />
            <Switch>
              <PrivateRoute Route exact path="/" component={Home} />

              <PrivateRoute
                Route
                exact
                path="/profile"
                component={UserProfile}
              />
              <Route exact path="/signup" component={SignUp} />
              <Route exact path="/signin" component={SignIn} />
            </Switch>
          </Fragment>
        </Router>
      </AlertState>
    </PostState>
  </ProfileState>
</AuthState>

return (
<Route
  {...rest}
  render={(props) =>
    !isAuthenticate && !loading_State ? (
      <Redirect to="/signin" />
    ) : (
      <Component {...props} />
    )
  }
/>