Возврат из функции только тогда, когда API возвращает успешный ответ от бэкэнда в React

Мне нужна помощь в отношении частной маршрутизации в react-router-6. На самом деле, я хочу вернуть компонент только тогда, когда внутренний API возвращает ответ об успешном завершении. см. следующий фрагмент кода,

export default function PrivateOutlet() {
const dispatch = useDispatch();

useEffect(() => {
    dispatch(getCurrentUser())
    .then((res) => {
        localStorage.setItem('id', res.id);
    })
    .catch(error => console.log(error) );
}, [);
return   (localStorage.getItem('id') !== "undefined") ? <Outlet /> : <Navigate to="/login" />
};

Здесь проблема заключается в том, что перед возвратом успешного ответа из API getCurrentUser() эта функция PrivateOutlet возвращает значение. не могли бы вы помочь в этом?

Под «возвращаемым значением» вы конкретно имеете в виду компонент Outlet, который позволяет получить доступ к защищенному маршруту? Если значение id в localStorage отличается от undefined, то не означает ли это, что ранее была по меньшей мере одна успешная проверка подлинности? Немного непонятно, в чем проблема или о чем вы спрашиваете. Можно более подробно осветить вопрос?

Drew Reese 10.04.2022 10:41

«Под «возвратом значения» вы конкретно имеете в виду, что компонент Outlet визуализируется, позволяя получить доступ к защищенному маршруту?» это актуальная проблема.

Subrata Ghosh 10.04.2022 10:45

Я не понимаю... если в какой-то момент пользователь аутентифицирован и id установлен в localStorage, почему ему не разрешен доступ к перенаправленному контенту? Вы говорите, что это условие не работает для «неавторизованных» пользователей, и они все равно могут получить доступ к маршруту? Должны ли вы вместо этого сверяться с null?

Drew Reese 10.04.2022 10:47

видите, проблема в том, что после успешного входа в систему мне нужно вызвать getCurrentUser API и на основе значения Id, которое возвращается из этого API, мне нужно разрешить доступ к маршрутизируемому спору.

Subrata Ghosh 10.04.2022 10:50

Ясно, значит, localStorage здесь неуместен? Кажется лишним.

Drew Reese 10.04.2022 10:55

Тогда как я могу разрешить доступ к маршрутизируемому спору, есть ли другой способ решить эту проблему? Можете ли вы помочь в этом?

Subrata Ghosh 10.04.2022 10:58
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
6
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

LocalStorage кажется совершенно посторонним/лишним, если вы действительно хотите использовать действие getCurrentUser для получения id. Используйте локальное состояние id, которое не соответствует аутентифицированному или неаутентифицированному значению id. Подождите, пока состояние id не будет заполнено, чтобы отобразить Outlet или перенаправить.

Пример:

export default function PrivateOutlet() {
  const [id, setId] = React.useState();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getCurrentUser())
      .then((res) => {
        setId(res.id); // valid id or null
      })
      .catch(error => {
        console.log(error);
        setId(null);
      );
  }, []);

  if (id === undefined) return null; // or loading indicator/spinner/etc

  return (id)
    ? <Outlet />
    : <Navigate to="/login" replace />
};

Если вы хотите продолжить использование localStorage, используйте локальное состояние «загрузки» и условно визуализируйте null или какой-либо индикатор загрузки, пока не будет получен текущий идентификатор пользователя. Кроме того, я не уверен, что это была опечатка, но вы, скорее всего, хотели сравнить значение из localStorage со строковым литералом undefinedи нет"undefined". Это все еще работает, потому что обновление состояния загрузки вызывает повторную визуализацию, и компонент может прочитать значение id, только что установленное в localStorage.

Пример:

export default function PrivateOutlet() {
  const [isLoaded, setIsLoaded] = React.useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getCurrentUser())
      .then((res) => {
        localStorage.setItem('id', res.id);
      })
      .catch(error => {
        console.log(error);
        localStorage.removeItem('id');
      )
      .finally(() => setIsLoaded(true));
  }, []);

  if (!isLoaded) return null; // or loading indicator/spinner/etc

  return (localStorage.getItem('id') !== undefined)
    ? <Outlet />
    : <Navigate to="/login" replace />
};

Да... используя этот подход, он работает отлично. Спасибо.

Subrata Ghosh 10.04.2022 11:44

Другие вопросы по теме