useEffect 挂钩中的函数未运行

Question

在过去的两天里，我一直在努力解决页面重新加载 reactJS/NodeJS 应用程序进入登录页面的问题。我使用 jwt 身份验证。在每一页上，我在useEffect 中都有loadUser 函数 有功能：

const loadUser = async () => {
    if (localStorage.token) {
      setAuthToken(localStorage.token);
    }

    try {
      const res = await axios.get("/api/auth");
      dispatch({ type: USER_LOADED, payload: res.data });
    } catch (err) {
      dispatch({ type: AUTH_ERROR });
    }
  };

// USER_LOADED 

case USER_LOADED:
  return {
    ...state,
    isAuthenticated: true,
    loading: false,
    user: action.payload,
    loaded: true,
  };

页面重新加载应用程序进入登录页面并设置初始状态。看起来函数没有运行，我不明白为什么？

有什么想法吗？

Answer 1

您的代码似乎不同步。您能否在本地显示钩子和身份验证状态的重定向+存储。

我个人曾使用 cookie 在本地存储令牌。我用凭据调用了我的api：“include”。但不是在每个页面上，只是作为 React 应用程序的主页，所以最终所有组件合并并显示在比方说仪表板。 并且很简单，如果 api 返回 true，我将本地授权状态变量设置为 true。 下面渲染了仪表板，else 语句表示 API 仍在被调用（互联网很慢等）。

{ 获取（${pusherConfig.API_URL}/admin/api/dashboard, { 方法：“获取”， 凭据：“包括”， }) .then((res) => res.text()) .then((res) => setAuthState({ 授权: 1 })); }

{授权？ (仪表板组件/>):(

受保护的路线！身份验证.../p> )}

在主登录页面上的设置也与上述相同。 （因为它是一个完全不同的页面）

{登录？登录组件 /> : 仪表板组件 />}