Аутентификация не работает с реагирующим маршрутизатором, redux и redux-saga - PullRequest
Новая
       6

Аутентификация не работает с реагирующим маршрутизатором, redux и redux-saga

0 голосов
/ 03 декабря 2018

Я пытаюсь реализовать redirect, используя react-router и redux.В основном я пытаюсь проверить, что токен пользователя (хранящийся в localStorage) по-прежнему действителен при каждом запросе маршрута.Иначе я хочу перенаправить пользователя на страницу входа.

Сначала у меня есть этот маршрут (включен только соответствующий код. Обратите внимание на onVerifyRequest опору, которая является редуксным действием): 

const PrivateRoute = ({ component: Component, onverifyRequest, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      onverifyRequest() === 200 ? (
        <div>
          <Header />
          <Component {...props} />
        </div>
      ) : (
        <Redirect
          to={{
            pathname: '/login',
          }}
        />
      )
    }
  />
);

function mapDispatchToProps(dispatch) {
  return {
    onverifyRequest: () => dispatch(verifyRequest()),
  };
}

PrivateRoute.propTypes = {
  onverifyRequest: PropTypes.func,
};

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

export default compose(withConnect)(PrivateRoute);

verifyRequest - это действие: 

export function verifyRequest() {
  return {
    type: VERIFY_LOGIN,
  };
}

Прослушивание саги примитивов для этого действия выглядит следующим образом: 

const verifyLoginUrl = `${process.env.API_URL}/api/verify-login`;

function verifyLoginApi() {
  return (
    fetch(verifyLoginUrl, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        token:
          localStorage.getItem('token') || localStorage.getItem('admin-token'),
      },
    })
      .then(async response => {
        if (!response.ok) {
          return response.status;
        }
        return response.json();
      })
  );
}

function* verifyLogin() {
  let apiResponse;
  try {
    apiResponse = yield call(verifyLoginApi);
    return apiResponse;
  } catch (error) {
    yield put({ type: VERIFY_FAILURE, error });
  }
  return apiResponse;
}

Итак, я хочу перенаправить пользователя на вход, если статус ответа не равен 200 ,Но это не работает.Я не перенаправлен, чтобы войти и остаться на той же странице.Но я вижу, что response.status - это не 200, поэтому следует выполнить перенаправление.

Отлично подходит для любых комментариев!С наилучшими пожеланиями

...