在 props 接收 Redux 状态之前受保护的 React 路由重定向

Question

当我刷新页面时，我使用react-router-dom 创建的受保护路由在mapStateToProps 触发之前呈现并且组件接收道具。这会导致重定向到/login 路由，尽管我已经登录了。

我有一个像这样的 Redux 商店：

const initialState = {
    isAuthenticated: false,
    user: {}
};

还有一个名为 App.js 的组件，其中包含路由：

componentDidMount() {
    if (localStorage.token)
        setAuthToken(localStorage.token);

    store.dispatch(loadUser());
}

setAuthToken 方法在 axios 请求中添加标头。 还有 loadUser() 方法，它是具有此类代码的动作创建者：

export const loadUser = () => async dispatch => {
    if (localStorage.token) {
        setAuthToken(localStorage.token);
    }

    try {
        const res = await axios.get('/api/v1/user');

        dispatch({
            type: USER_LOADED,
            payload: res.data
        });
    }

    catch (e) {
        console.log(e);
    }
};

因此，如果 localStorage 中有 JWT 令牌，它基本上会将商店的 isAuthenticated 字段更改为 true，并将用户信息添加到商店中的 user 对象中。

在我的受保护路由组件中，如果 Redux 商店的 isAuthenticated 等于 false，我有重定向到 /login 的代码。

render() {
    if (this.props.auth.isAuthenticated === false)
        return (<Redirect to={'/sign-in'}/>);

现在，如果我从导航栏中单击指向受保护路线的链接，一切正常。如果我已登录，则会显示受保护的路线。如果我不是，那么我将被重定向到/login。

当我刷新受保护路由上的页面时会出现问题。我立即被重定向到/login，因为页面是在组件接收到 Redux store 的 props 状态之前呈现的。

我该如何解决这个问题？我应该等待道具，还是改变路线保护的方法？

Answer 1

解决此问题的一种简单方法是向减速器添加加载状态。添加一个在 loadUser 开始时分派的简单操作，它将加载变为 true，并且在 API 调用之后，当您的减速器遇到 USER_LOADED 情况时，它会将加载变为 false，填充用户状态，根据用户是否将 isAuthenticated 更改为 true/false已登录。并将受保护路由组件的条件更改为 this.props.auth.isAuthenticated === false && !this.props.user.loading。