Question

我是MERN堆栈的新手，我正在尝试使用前端的React＆Redux和后端的PassportJS，Node＆Express来实现登录。当前登录有效时，有一种竞态条件，我还没有找到解决的方法：如果我引入了带有以下内容的私有react-router路由：

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => props.auth ? <Component {...props} /> : <Redirect to={{
    pathname: '/login',
    search: `?from=${encodeURIComponent(props.location.pathname)}`,
  }} />} />
);

它将任何专用路由重定向到登录页面。也就是说，因为auth信息是通过名为fetch_user的Redux操作异步获取的，该操作类似于以下内容

export const fetchUser = () => async dispatch => {
        const res = await axios.get('/api/current_user');
        dispatch({type: FETCH_USER, payload: res.data});
};

然后在很短的时间后加载身份验证信息，并且该信息可用于任何组件。同时，我仍然被重定向到登录页面。

有人对如何解决这个问题有任何想法，并且路由器可能要等到Redux呼叫完成吗？

具有Redux PassportJS身份验证的专用路由竞争条件

0 个答案: