Переадресация во время получения epi c с помощью наблюдаемых редуксов и RxJS - PullRequest
Новая
       17

Переадресация во время получения epi c с помощью наблюдаемых редуксов и RxJS

1 голос
/ 25 января 2020

У меня есть выборка Epi c, которая может вернуть 401 или 403, если у пользователя нет доступа к ресурсам на стороне сервера. Я хочу перенаправить во время этого Epi c, если это так.

Сейчас я делаю это: 

export const fetch$ = <T = any>(req: IRequest) =>
    from(performFetch<T>(req)).pipe(
        switchMap(res => of(res)),
        catchError(e => {
            if (e.status === 401 || e.status === 403) {
                window.location.replace(`/login?fwd=${encodeURIComponent(window.location.pathname)}`);
                return NEVER;
            }
            return of(e);
        })
    );

Где performFetch это просто простая функция, которая делает извлекает и возвращает обещание.

Я использую window.location.replace, и пока он работает нормально, но кто-то сказал мне, что это испортит React.

Я пытался использовать connected-react-router и верните действие push, но оно не выполняло перенаправление.

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

1 Ответ

0 голосов
/ 26 января 2020

Не должно быть необходимости использовать window.location.replace, так как вы установили react-router или connected-react-router, который обрабатывает навигацию по компонентам в вашем приложении.

Вы можете рассмотреть возможность использования replace или push.

Если вы вернете действие sh, вам придется обернуть его, используя of operator. 

import { replace } from 'connected-react-router'.

export const fetch$ = <T = any>(req: IRequest) =>
  from(performFetch<T>(req)).pipe(
    switchMap(res => of(res)),
    catchError(e => {
      if (e.status === 401 || e.status === 403) {
        of(replace(`/login?fwd=${encodeURIComponent(window.location.pathname)}`));
      }
      return of(e);
    })
  );

Или вы можете просто вызвать replace / push как побочный эффект, возвращая что-то еще. 

export const fetch$ = <T = any>(req: IRequest) =>
  from(performFetch<T>(req)).pipe(
    switchMap(res => of(res)),
    catchError(e => {
      if (e.status === 401 || e.status === 403) {
        replace(`/login?fwd=${encodeURIComponent(window.location.pathname)}`);
        return NEVER;
      }
      return of(e);
    })
  );
...