反应redux身份验证重定向错误

Question

我决定制作一个带有反应和流明的应用程序，我写了一些东西并成功登录和注销操作，但在登录后我想通过一个链接去另一个组件时，应用程序踢出了我。当我登录时，app将令牌和redux连接reducer setState设置为isAuthenticaed为true。

为什么应用程序会在我登录后将其踢出去？为什么isAuthenticated道具变得虚假？

我该如何解决？在rest api中authencitaced的逻辑是什么？

  

login.jsx

import React from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { Alert } from "reactstrap";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { login } from "../../actions/authActions";
import { LoadingButton, Input } from "../../elements";

class Login extends React.Component {
    componentWillMount() {
        if ( this.props.isAuthenticated ){
            console.log('yes');
        } else {
            console.log('no');
        }
        /*if (!this.props.isAuthenticated) {
            this.context.router.history.push("/login");
        }*/
    }

    constructor(props) {
        super(props);

        this.handleSubmit = this.handleSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
        this.errorMessageOnDismiss = this.errorMessageOnDismiss.bind(this);

        this.state = {
            email: "",
            password: "",
            formErrors: {
                email: "",
                password: ""
            },
            formSubmit: false,
            errorMessage: "",
            errorMessageVisible: false
        };
    }

    errorMessageOnDismiss() {
        this.setState(prevState => ({
            errorMessageVisible: false
        }));
    }

    onChange(e) {
        var _name = e.target.name,
            _value = e.target.value;
        this.setState(prevState => ({
            [_name]: _value
        }));
    }

    handleSubmit(e) {
        e.preventDefault();

        this.setState(prevState => ({
            formSubmit: true,
            errorMessageVisible: false,
            errorMessage: ""
        }));

        const user = {
            email: this.state.email,
            password: this.state.password
        };

        this.props.login(user).then(
            res => this.context.router.history.push("/"),
            err => {
                var settedFormErrors = {};

                if (!err.response.data.status) {
                    for (var key in err.response.data) {
                        settedFormErrors[key] = err.response.data[key][0];
                    }

                    this.setState(prevState => ({
                        formErrors: {
                            ...prevState.formErrors,
                            ...settedFormErrors
                        }
                    }));
                } else {
                    this.setState(prevState => ({
                        errorMessageVisible: true,
                        errorMessage: err.response.data.messages[0]
                    }));
                }

                this.setState(prevState => ({
                    formSubmit: false
                }));
            }
        );
    }

    render() {
        return (
            <div className="row">
                <div className="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
                    <div className="card auth-card">
                        <div className="card-body shadow-3">
                            <div className="card-title text-center mb-3">
                                Giriş Yap
                            </div>
                            <hr />
                            {this.state.errorMessage.length > 0 ? (
                                <Alert
                                    color="danger"
                                    isOpen={this.state.errorMessageVisible}
                                    toggle={this.errorMessageOnDismiss}
                                >
                                    {this.state.errorMessage}
                                </Alert>
                            ) : (
                                ""
                            )}
                            <form
                                onSubmit={this.handleSubmit}
                                className="table-responsive"
                                autoComplete="off"
                            >
                                <table className="table table-borderless mb-0">
                                    <tbody>
                                        <tr>
                                            <td>E-mail</td>
                                            <td>
                                                <Input
                                                    type="email"
                                                    name="email"
                                                    value={this.state.email}
                                                    onChange={this.onChange}
                                                    confirmable
                                                    errorMessage={
                                                        this.state.formErrors
                                                            .email
                                                    }
                                                    valid={
                                                        this.state.formErrors
                                                            .email.length == 0
                                                    }
                                                />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Şifre</td>
                                            <td>
                                                <Input
                                                    type="password"
                                                    name="password"
                                                    value={this.state.password}
                                                    onChange={this.onChange}
                                                    confirmable
                                                    errorMessage={
                                                        this.state.formErrors
                                                            .password
                                                    }
                                                    valid={
                                                        this.state.formErrors
                                                            .password.length ==
                                                        0
                                                    }
                                                />
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colSpan="2">
                                                <LoadingButton
                                                    text="Giriş Yap"
                                                    block
                                                    submit
                                                    isLoading={
                                                        this.state.formSubmit
                                                    }
                                                />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colSpan="2">
                                                <Link
                                                    to="/forget_password"
                                                    className="btn btn-link"
                                                >
                                                    Şifremi Unuttum
                                                </Link>
                                                <Link
                                                    to="/register"
                                                    className="btn btn-link float-right"
                                                >
                                                    Kayıt Ol
                                                </Link>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

function mapStatesToProps(state) {
    return {
        isAuthenticated: state.auth.isAuthenticated
    };
}

Login.propTypes = {
    login: PropTypes.func.isRequired,
    isAuthenticated: PropTypes.bool.isRequired
};

Login.contextTypes = {
    router: PropTypes.object.isRequired
};

export default connect(mapStatesToProps, { login })(Login);

  

authAction.jsx

import axios from "axios";
import setAuthorizationToken from "../utils/setAuthorizationToken";
import { SET_CURRENT_USER } from "./types";

export function setCurrentUser(isAuthenticated) {
  return {
    type: SET_CURRENT_USER,
    isAuthenticated
  };
}

export function logout() {
  return dispatch => {
    return axios.post("/api/logout").then(res => {
      localStorage.removeItem("token");
      setAuthorizationToken(false);
      dispatch(setCurrentUser(false));
    });
  };
}

export function login(data) {
  return dispatch => {
    return axios.post("/api/login", data).then(res => {
      const token = res.data.token;
      localStorage.setItem("token", token);
      setAuthorizationToken(token);
      dispatch(setCurrentUser(true));
    });
  };
}

  

auth（reducer）

import { SET_CURRENT_USER } from '../actions/types';
import isEmpty from 'lodash/isEmpty';

const initialState = {
  isAuthenticated: false
};

export default (state = initialState, action = {}) => {
  switch(action.type) {
    case SET_CURRENT_USER:
      return {
        isAuthenticated: action.isAuthenticated
      };
    default: return state;
  }
}

  

setAuthorization.jsx

import axios from "axios";

export default function setAuthorizationToken(token) {
    if (token) {
        axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
    } else {
        delete axios.defaults.headers.common["Authorization"];
    }
}

问题出在哪里？

请帮帮我