wake-up-neo.com

react-Redux-Umleitung auf eine andere Seite nach dem Anmelden

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

Ich kann nicht einseitig auf mein Dashboard umleiten, ich habe viel gesucht, aber nichts Nützliches erhalten. Ich verwende React Router v4. Können Sie mir bitte vorschlagen, ob ich diesen Benutzer mit JWT richtig anmeldet oder nicht.

javascriptreactjsreduxreact-routerreact-redux
6
tapan dave

erstellen Sie Ihre eigene history in history.js-Datei mit dieser history library .

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

const history = createHistory()

export default history

Liefern Sie es an Ihren Router:

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

Dann können Sie dieses history-Objekt verwenden, um von überall umzuleiten. In deiner Aktion:

import history from './history'
history.Push(`${app}/dashboard`)
6
nrgwsth
  1. Sie können react-router-redux Hinzufügen, wodurch alle Routing-Informationen bequem zum Redux-Status hinzugefügt werden. Sie können jedoch auch Push aus react-router-redux Verwenden, indem Sie:

dispatch(Push('/dashboard'))

Sie können mit import { Push } from 'react-router-redux' Darauf zugreifen.

  1. Ich glaube, Sie machen mit JWT nichts falsch. Ich würde Ihren fetch -Aufruf mit der Hilfsfunktion abstrahieren. Ich gehe davon aus, dass Sie Ihr Zugriffstoken nach der Autorisierung allen zukünftigen Anforderungen hinzufügen müssen, und mithilfe der Hilfsfunktion können Sie dies einfacher tun und Ihren Code sauberer halten.
3
Yoshi

window.location.href schlägt auf Ihrem Server ein und Sie verlieren alle Vorteile einer Einzelseitenanwendung. Sie sollten stattdessen ein clientseitiges Routing mit dem Verlaufsobjekt verwenden

In diesem Szenario könnte eine gute Lösung darin bestehen, einen Rückruf von der Komponente zu übergeben, die den ersten Versand mit einem Verlauf auslöst. Wechseln Sie in den neuen Status

z.B. 

Angenommen, Sie haben in Ihren Komponenten-Requisiten Zugriff auf die Historie 

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

dann rufen Sie anstelle von window.location.href = ${app}/dashboard den Rückruf auf

1
Karim