0
votes

Le routeur protégé ne rend pas à nouveau le rendu lors de la mise à jour de l'état Redux

J'essaie d'utiliser la route protégée pour empêcher la visibilité des pages sur les utilisateurs non authentifiés. Pour ce faire, chaque fois que la page est rechargée, je me connecte au serveur pour vérifier le jeton et voir si l'utilisateur est authentifié et sur la réponse du serveur, je mets à jour l'état de Redux. Cela fonctionne bien, mais le problème apparaît lorsque j'essaie de mettre à jour le composant Route protégée. En raison du délai de réponse du serveur, le composant est rendu pour la première fois avec une valeur d'état par défaut qui est false , mais lorsque j'obtiens une réponse du serveur et que je mets à jour l'état de Redux sur true , mon composant ne le fait pas rendre à nouveau

function ProtectedRoute(props, {component: Component, ...rest}){
    return (
        <Route 
            {...rest}
            render={props =>{
               if(props.userLoginStatus){
                    console.log('protected if')
                    return <Component {...props} />
                } else {
                    console.log('protected else')
                    return <Redirect to={{
                        pathname: '/forbidden',
                        state: {from: props.location}
                    }}
                    />
                }
            }}
        />
    )
}

const mapStateToProps = (state) => {
    return {
        userLoginStatus: state.userLoginReducer.userLogin
    }
}

export default connect(mapStateToProps)(ProtectedRoute)

javascript reactjs api redux router

0 commentaires

3 Réponses :

0
votes

Vous pouvez peut-être utiliser "browserHistory" comme ci-dessous pour rediriger.

import { browserHistory } from 'react-router'

// ...
else {
       console.log('protected else')
       return browserHistory.push('/forbidden');
     }

2 commentaires

ce n'est pas une réponse à ma question, car comme je l'ai dit, la valeur par défaut de l'état par défaut est false , cela signifie qu'il redirige toujours vers '/ interdit' , mais si l'état est mis à jour à true , cela devrait permettre d'utiliser des composants protégés. Le problème est qu'après la mise à jour de l'état du composant true 'n'a pas été rendu et n'a pas vu que l'état est true

Désolé j'ai mal compris.

0
votes

J'ai également eu un problème similaire.

Tout d'abord, vous devez envoyer une action qui vérifie si l'utilisateur est authentifié juste après le rendu de votre boutique.

Étant donné que la vérification de l'authentification semble être un processus asynchrone, vous voudrez peut-être envoyer deux actions: auth_verification_request lorsque le magasin est rendu en premier, et auth_verification_success lorsque l'authentification est vérifiée avec succès.

Ensuite l'état mis à jour sera envoyé à votre ProtectedRoute en utilisant la fonction mapStateToProps . Après cela, vos composants devraient être rendus après la mise à jour de l'état d'authentification.

Je vais vous montrer quelques exemples.

authActions.js

const mapStateToProps = state => {

    return {
        isAuthenticated: state.auth.isAuthenticated,
        isVerifying: state.auth.isVerifying,
    };
}




<PrivateRoute
    exact
    path='PROTECTED_PATH'
    component={ DashboardPage }
    isAuthenticated={ isAuthenticated }
    isVerifying={ isVerifying }
/>

3 commentaires

Je ne comprends pas comment l'ajout d'une autre action à Redux aide à re-rendre? Ça ne marche pas trop.

Lorsque vos actions sont déclenchées, cela modifiera l'état de votre boutique. Ensuite, l'ensemble de votre application sera rendu.

ok, j'utilise cette logique: lorsque l'application démarre, il vérifie l'état du jeton sur le serveur. Signifier pendant le rendu de l'application entière. Lorsque l'application reçoit une réponse du serveur indiquant que tout est ok et que l'utilisateur est authentifié, il envoie l'action et est défini sur true et selon vous, il doit restituer l'application entière, mais ce n'est pas le cas. Mon composant ProtectedRoute ne s'affiche pas à nouveau

0
votes

Selon cet article , la solution consiste à ajouter une instruction if au composant qui rend le chargement jusqu'à ce que le composant reçoive une réponse du serveur. J'ai donc changé la valeur d'action par défaut de false à null et j'ai ajouté l'instruction if . Dans mon code, cela ressemble à ceci:

function ProtectedRoute({component: Component, isAuth, ...rest}){

    //Whaiting until gets response from server
    if (isAuth === null) {
        return 'loading..'
    }
    
    return (
        <Route 
            {...rest}
            render={(props) => {
                if(isAuth){
                    console.log('protected if')
                    return <Component {...props} />
                } else {
                    return <Redirect to={{
                        pathname: '/forbidden',
                        state: {from: props.location}
                    }}
                    />
                }
            }}
        />
    )
}

const mapStateToProps = (state) => {
    return {
        isAuth: state.userLoginReducer.userLogin
    }
}

export default connect(mapStateToProps)(ProtectedRoute)

Je ne suis pas sûr que ce soit la meilleure façon de résoudre ce problème, mais cela semble avoir résolu mon mal de tête.

0 commentaires