javascript - protected React 路由在 props 接收 Redux 状态之前重定向

Question

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

我有一个看起来像这样的 Redux 商店:

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

和一个包含路由的名为 App.js 的组件:

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

    store.dispatch(loadUser());
}

其中 setAuthToken 方法正在向 axios 请求添加 header 。还有 loadUser() 方法，它是一个 Action 创建器，代码如下:

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

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

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

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

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

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

我该如何解决这个问题？我应该以某种方式等待 Prop ，还是改变路线保护的方法？

Answer 1

解决这个问题的一个简单方法是向你的 reducer 添加一个加载状态。添加一个简单的操作，该操作在 loadUser 开始时分派(dispatch)，将加载变为真，并且在 API 调用之后，当您的 reducer 遇到 USER_LOADED 情况时，它将加载变为假，填充用户状态，将 isAuthenticated 更改为真/假，具体取决于用户已登录。并将 protected 路由组件的条件更改为 this.props.auth.isAuthenticated === false && !this.props.user.loading。