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存储区的/login等于false，那么在受保护的路由组件中，我有重定向到isAuthenticated的代码。

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

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

当我刷新位于受保护路由上的页面时，会出现问题。我立即重定向到/login，因为在组件接收props中Redux存储的状态之前就渲染了页面。

我该如何解决？我应该以某种方式等待道具，还是改变路线保护的方法？

Answer 1

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

在道具获得Redux状态之前受保护的React路由重定向

1 个答案: