web-dev-qa-db-fra.com

react-redux redirige vers une autre page après la connexion

action.js:

export const login = creds => {
    console.log(`${url}/login`);
    const requestOptions = {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
        },
        body: creds
    };

    return function(dispatch) {
        dispatch({ type: LOGIN_REQUEST });
        function timer() {
            return fetch(`${url}/login`, requestOptions).then(response => {
                if (!response.ok) {
                    console.log(response);
                    return response.json().then(json => {
                        var error = new Error(json.message);
                        error.response = response;
                        throw error;
                    });
                } else {
                    console.log("3");
                    return response.json();
                }
            }).then(user => {
                if (user.message === "ok") {
                    localStorage.setItem("token", user.token);
                    dispatch({ type: LOGIN_SUCCESS, payload: user.token });
                    window.location.href = `${app}/dashboard`;
                } else {
                    const error = user.message;
                    throw new Error(error);
                }
            }).catch(function(error) {
                dispatch(loginError(error));
            });
        }
        setTimeout(timer, 5000)
    }
};

Je ne parviens pas à rediriger d'une seule page vers mon tableau de bord, j'ai beaucoup cherché, mais rien ne m'a été utile J'utilise React Router v4. Pouvez-vous s'il vous plaît suggérer si je fais cette connexion d'utilisateur avec JWT de la bonne façon ou non.

javascriptreactjsreduxreact-routerreact-redux
6
tapan dave

créez votre propre fichier history in history.js en utilisant cette history library .

//history.js
import createHistory from 'history/createBrowserHistory'

const history = createHistory()

export default history

Fournissez-le à votre routeur:

<Router history = {history}>.....</Router>

Ensuite, vous pouvez utiliser cet objet history pour rediriger de n'importe où. Dans votre action:

import history from './history'
history.Push(`${app}/dashboard`)
6
nrgwsth

window.location.href va frapper votre serveur et vous perdrez tous les avantages d'une application à page unique, vous devriez utiliser un routage côté client à la place de l'objet historique

Dans ce scénario, une bonne solution pourrait être de passer un rappel du composant qui déclenche le premier envoi contenant un historique.Poussez vers le nouvel état.

par exemple. 

En supposant qu'à l'intérieur de vos composants, vous avez accès à l'historique 

login(body, () => {
  this.props.history.Push('/dashboard');
})

puis à la place de window.location.href = ${app}/dashboard vous invoquez le rappel

1
Karim