使用中的功能效果挂钩未运行

问题描述

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

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,};

页面重新加载应用程序进入登录页面并设置初始状态。似乎该功能未运行，我不明白为什么？

有什么想法吗？

解决方法

您的代码似乎未同步。您能否在本地显示挂钩以及auth状态的重定向和存储。

我个人使用cookie来在本地存储令牌。我用凭证“：include”调用了我的api。但是并不是在每个页面上，而是在主页上将其作为一个React应用程序，因此最终所有组件都合并并显示在一个仪表盘上。 而且很简单，如果api返回true，则将本地授权状态变量设置为true。 在呈现的仪表盘下方，else语句表示api仍在被调用（互联网运行缓慢等）。

{ fetch（${pusherConfig.API_URL}/admin/api/dashboard，{ 方法：“ GET”， 凭据：“包括”， }） .then（（res）=> res.text（）） .then（（res）=> setAuthState（{authorized：1}））; }

{授权？ （DashboardComponent />）：（

受保护的路由！正在验证... / p>）}

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

{已登录？ LoginComponent />：DashboardComponent />}