Zum Umleiten auf die Login-Seite Vor der Eingabe von Index-Route in ReactJS + REDUX

Ich bin wirklich neues zu reagieren, nun möchte ich mich zur Umsetzung einer login-Seite, bevor Sie irgendwelche Routen, die ich bin derzeit mit :

Reagieren : 15.4.2,
Reagieren-DOM : 15.4.2,
Reagieren-Redux : 5.0.4,
und ich bin mit webpack und es2015 als meine Vorgabe.

ich habe so viel getan googeln, aber ich habe immer noch keine Lösung gefunden, hier ist der aktuelle Quelltext :
für index.js :

import React from "react";
import ReacrDOM from "react-dom";
import {Router, Route, IndexRoute, hashHistory} from "react-router"
import {Provider} from "react-redux";

import store from "./store";
import Layout from "./pages/Layout";
import Dashboard from "./pages/Dashboard";
import Login from "./pages/login/index";
import User from "./pages/user/index";
import EnsureLoggedIn from "./EnsureLoggedIn";

const app = document.getElementById("app");

ReacrDOM.render(
    <Provider store={store}>
        <Router history={hashHistory}>
            <Route path="/login" component={Login}/>
            <Route component={EnsureLoggedIn}>
                <Route path="/" component={Layout}>
                    <IndexRoute component={Dashboard}/>
                    <Route path="user" component={User}/>
                </Route>
            </Route>
        </Router>
    </Provider>
    , app);

Hier ist mein Dashboar-Komponente :

import React from "react";
import {connect} from "react-redux";

@connect((store) => {
    return {

    }
})

export default class Dashboard extends React.Component {

    componentWillMount() {

    }

    render() {
        return (
            <div>
                <h3>Dashboard</h3>
                <hr/>
            </div>
        );
    }
}

und hier ist mein EnsureLoggedIn Datei :

import React from "react";
import {browserHistory} from 'react-router';
import {connect} from "react-redux";
import {login_check, show_log} from "./actions/logActions";

@connect((store) => {
    return {
        session_key: store.logReducer.session_key,
        user_id: store.logReducer.user_id,
        error_message: store.logReducer.error_message,
        logged_in: store.logReducer.logged_in
    }
})


export default class EnsureLoggedIn extends React.Component {
    componentDidMount() {

        if (!this.isLoggedIn()) {
            browserHistory.push('#/login');
        }
    }

    isLoggedIn() {
        this.props.dispatch(show_log());
        var account = {user_id: this.props.user_id, session_key: this.props.session_key};
        this.props.dispatch(login_check(account));
        if (!this.props.logged_in) {
            return false;
        }

        return true;
    }

    render() {
        return this.props.children
    }
}

und hier ist mein logReducer :

export default function (state = {
    user_id: null,
    session_key: null,
    error_message: null,
    logged_in: false,
    log_error: null,
}, action) {

    switch (action.type) {
        case "LOGIN": {
            var {id, session_key}=action.payload.data.data
            state = {
                ...state,
                user_id: id,
                session_key,
                error_message: null,
                logged_in: true,
                log_error: null
            };
            break;
        }

        case "LOGIN_FAILED": {
            state = {
                ...state,
                error_message: null,
                log_error: action.payload.response.data.error.message,
                logged_in: false
            };
            break;
        }

        case "CHECK_LOGIN": {
            state = {...state, error_message: null, logged_in: true};
            break;
        }

        case "CHECK_LOGIN_FAILED": {
            state = {
                ...state,
                error_message: action.payload.response.data.error.message,
                log_error: null,
                logged_in: false
            };
            break;
        }

        case "LOGOUT": {
            state = {
                ...state,
                user_id: null,
                session_key: null,
                error_message: null,
                log_error: null,
                logged_in: false
            };
            break;
        }

        case "GET_LOG_DATA": {
            state = {...state};
            break;
        }

    }

    return state;
}

und das ist mein logActions Datei :

import axios from "axios";

const basicAuth = {
    headers: {"authorization": "Basic dmlkeTpwdmlkeQ=="}
}

export function login(email = "", password = "") {
    var url = 'http://localhost:8080/dfordatabase/api/api/login';
    return function (dispatch) {
        axios.post(url, {email: email, password: password}, basicAuth)
            .then((response) => {
                dispatch({type: "LOGIN", payload: response});
            }).catch((error) => {
            dispatch({type: "LOGIN_FAILED", payload: error});
        })
    }
}

export function login_check(account = {}) {
    var url = 'http://localhost:8080/dfordatabase/api/api/login_check';
    return function (dispatch) {
        axios.post(url, {...account}, basicAuth)
            .then((response) => {
                dispatch({type: "CHECK_LOGIN", payload: response});
            }).catch((error) => {
            dispatch({type: "CHECK_LOGIN_FAILED", payload: error});
        })
    }
}

export function show_log() {

    return function (dispatch) {
        dispatch({type: "GET_LOG_DATA", payload: null});
    }
}

das problem ist : in der Tat login-Seite erscheint auf den ersten, wenn ich den code ausführen, aber wenn ich füllen Sie die Anmelde-und eingeloggt, die Seite ist nicht umleiten auf meinem index Weg " /" die url ändern, aber das dashboard wird nicht angezeigt, wenn ich die Seite aktualisieren dashboard angezeigt, aber das problem ist, alle staatlichen meiner log reducer werden wieder leer.

kann mir jemand sagen, wo finde ich einige Beispiele von ähnlichen Entwicklung tutorial. Bitte bitte helft mir..

InformationsquelleAutor vidihermes | 2017-04-25