javascript - 如何在 ReactJS + REDUX 中进入索引路由之前重定向到登录页面

Question

这个问题在这里已经有了答案:





What component lifecycle to use to do something before render()?

(4 个回答)


2年前关闭。




我真的很陌生，现在我想在进入任何路线之前实现一个登录页面，我目前正在使用:

react :15.4.2，
react DOM : 15.4.2,
react -Redux:5.0.4，
我使用 webpack 和 es2015 作为我的预设。

我已经做了很多谷歌搜索，但我仍然没有找到任何解决方案，这是当前的源代码:
对于 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);

这是我的仪表板组件:

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

这是我的确保登录文件:

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

这是我的 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;
}

这是我的 logActions 文件:

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

问题是:当我运行代码时，确实首先会出现登录页面，但是当我填写凭据并登录时，页面不会重定向到我的索引路由“/”，url 已更改，但仪表板不会t 出现，如果我刷新页面仪表板出现但是，问题是我的日志 reducer 的所有状态再次变空。

谁能告诉我在哪里可以找到类似开发教程的一些示例。请帮助我..

Answer 1

属性(property)onEnter自 起已被删除 react 路由器-4 ，现在你应该使用 渲染 方法相反，这是一个如何进行重定向的示例:

<Route exact path="/home" render={(props) => (
  isUserLoggedIn() ? (
    <Home {...props} />
  ) : (
    <Redirect to="/login"/>
  )
)}/>