Функция в перехватчике useEffect не запущена

#node.js #reactjs #use-effect #context-api

#node.js #reactjs #использовать-эффект #реагирующий контекст

Вопрос:

В течение последних двух дней я боролся с проблемой, что при перезагрузке страницы приложение 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,
  };

При перезагрузке страницы приложение переходит на страницу входа в систему и устанавливает начальное состояние. Похоже, функция не запущена, и я не могу понять, почему?

Есть идеи?

1. убедитесь, что для вашего axios.get требуется начальная обратная косая черта .. в зависимости от вашего api

2. url в порядке. потому что эта функция работает со страницы входа на домашнюю страницу, но затем при перезагрузке она не работает .. состояние не настроено, и она просто переходит на страницу входа .. другая функция в useefect работает.

Ответ №1:

Похоже, ваш код не синхронизирован. Не могли бы вы показать перехват и перенаправление сохранение состояния авторизации локально.

Я лично использовал файлы cookie для локального хранения токена. Я вызвал свой api с учетными данными: «включить». Но не на каждой странице, а только на главной странице, поскольку это приложение React, поэтому все компоненты в конце объединяются и отображаются, скажем, на панели мониторинга. И просто, если api вернул true, я установил локальную авторизованную переменную состояния в true. И ниже отображена панель мониторинга, оператор else означает, что api все еще вызывается (интернет медленный и т.д.).

{ выборка( ${pusherConfig.API_URL}/admin/api/dashboard , { метод: «ПОЛУЧИТЬ», учетные данные: «включить», }) .затем((res) => res.text()) .затем((res) => setAuthState({ авторизовано: 1 })); }

{авторизован? ( DashboardComponent /> ) : (

Защищенный маршрут! проверка подлинности …/p> )}

и на главной странице входа также те же настройки, что и выше. (Поскольку это совершенно другая страница)

{авторизован? LoginComponent /> : DashboardComponent />}