Question

我正在尝试使用redirect和react-router来实现redux。基本上，我尝试验证用户的令牌（存储在localStorage中）对每个路由请求仍然有效。另外，我想将用户重定向到登录页面。

首先，我有这条路线（仅包含相关事件代码。请注意onVerifyRequest道具是一个redux动作）：

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

监听该动作的redux-saga看起来像这样：

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，因此应该进行重定向。

非常感谢任何评论！最好的问候

身份验证不适用于React Router，Redux和Redux-Saga

0 个答案: