我如何在用户获取时保护某些路由

Question

当我的应用程序安装时，我尝试通过存储在本地存储中的令牌来获取用户。如果令牌有效，则我将用户设置为对商店的响应。我想让用户看到 /profile 页面，只有当用户在商店时。但我似乎对如何实施它一无所知。如果商店中没有用户并且他们在一些 'protected' 页面上，例如 /profile 我想将他们重定向到登录。但问题是，一开始商店里没有用户，所以我不能只检查它，然后在用户重新加载页面时有条件地重定向（或不重定向）到其他页面。

App.js:

useEffect(()=> {
    dispatch(preserveUser())
  }, [dispatch])

User.sagas.js:

export function* handleUserPreserve() {
  try {
    yield put(resetState());
    yield put(setUserLoading(true));
    const user = yield call(
      getItems,
     `query {
      getUserByToken {
        purchasedProducts
        orders
        token
        _id
        email
        firstName
      }
    }`
      )
    yield put(setUser(user.data.getUserByToken));
    yield put(setUserLoading(false));
  } catch (error) {
    yield put(setUserError(error.message.replace('GraphQL error: ', '')));
    yield put(setUserLoading(false));
  }
}
export default function* userSaga() {
  yield takeEvery(PRESERVE_USER, handleUserPreserve);
}

初始状态：

export const initialState = {
  userData: null,
};

Answer 1

您应该在状态中添加另一个字段，例如 isUserLoaded: false。一旦收到来自 api 的回复，请将其标记为 true。然后在重定向条件中同时使用 user 和 isUserLoaded。
如果您将 HOC 用于受保护的路由，那么您可以将条件修改为如下所示以使其适用于您的情况。

function ProtectedRoute ({component: Component, authed, ...rest}) {
return (
  <Route
    {...rest}
    render={(props) => isUserLoaded === true && !user
      ? <Redirect to="/login" />
      : <Component {...props} /> }
   />
 )
}

您可以根据需要对其进行优化，但您肯定需要另一个变量来指示 api 已返回响应，然后您可以检查该用户是否在商店中。

我如何在用户获取时保护某些路由

How do i protect certain routes while user is fetching

reactjs

redux

redux-saga