我决定制作一个带有反应和流明的应用程序，我写了一些东西并成功登录和注销操作，但在登录后我想通过一个链接去另一个组件时，应用程序踢出了我。当我登录时，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"];
}
}
问题出在哪里？
请帮帮我