Lorsque j'utilise PrivateRoute, la page de connexion apparaît toujours une fois lorsque je recharge la page.

Question

Actuellement, j'utilise la PrivateRoute suivante pour déterminer si l'utilisateur est connecté, et si c'est le cas, l'utilisateur est dirigé vers la page spécifiée, et si non, l'utilisateur est dirigé vers la page de connexion. Cependant, lorsque je recharge la page, elle passe momentanément à la page de connexion, puis à la page racine, et je ne peux pas afficher à nouveau la page /comptes ou /notes.

Ce phénomène se produit également lorsque vous tapez directement dans la barre d'adresse.

Si vous en savez plus, j'apprécierais que vous me disiez pourquoi ce genre de diminution se produit.

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

action

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

Le problème est que votre état d'authentification dans redux sera perdu à chaque rechargement de la page et que vous ne pourrez plus identifier l'authentification. Pour éviter cela, vous pouvez sauvegarder votre état dans localStorage ou utiliser la fonction redux-persiste pour cela.