javascript - 当我使用 PrivateRoute 时，当我重新加载页面时，我总是会转到登录页面一次

Question

目前，我使用以下PrivateRoute来确定用户是否已登录，如果是，则将用户带到指定页面，如果没有，则将用户带到登录页面。但是，当我重新加载页面时，它会立即转换到登录页面，然后转换到根页面，并且我无法再次显示/accounts 或/notes 页面。

直接在地址栏中键入内容时也会出现这种现象。

如果您对此有更多了解，请告诉我为什么会出现这种下降，我将不胜感激。

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'

const PrivateRoute = ({ component: Component, auth, ...rest }) => (
    <Route
        {...rest}
        render={props => {
            if (auth.isLoading) {
                return <h2>Loading...</h2>;
            } else if (auth.isAuthenticated) {
                return <Component {...props} />;
            } else {
                return <Redirect to='/login' />;
            }
        }}
    />
);

const mapStateToProps = state => ({
    auth: state.auth
})

export default connect(mapStateToProps)(PrivateRoute);

行动

export const login = (username, password) => dispatch => {

    const config = {
        headers: {
            'Content-Type': 'application/json',
        }
    };

    const body = JSON.stringify({ username, password });

    axios
        .post(`${url}/api/auth/login`, body, config)
        .then((res) => {
            dispatch({
                type: LOGIN_SUCCESS,
                payload: res.data,
            });
        })
        .catch((err) => {
            dispatch(returnErrors(err.response.data, err.response.status));
            dispatch({
                type: LOGIN_FAIL,
            });
        });
};

Answer 1

问题是每次页面重新加载时，redux 中的身份验证状态都会丢失，因此您无法再识别身份验证。为了防止您可以将状态保存在 localStorage 中或使用 redux-persist为了它。