登录成功后点击Vip按钮后看不到Vip页面

尝试过的解决方式：

我试了一下，发现登录成功后再请求http://www.dell-lee.com/react/api/isLogin.json判断login登录状态也是false，正常应该是true。问题应该是出在这里，原因是因为新版谷歌浏览器记不住登录状态吗？

login下的index.js相关代码：

import React, { Component } from "react";
import { Link, withRouter } from 'react-router-dom';
import axios from 'axios';
import { Modal, Button, Input, message } from 'antd';
import "./style.css";


class Login extends Component {

    constructor(props) {
        super(props);
        this.state = {
            login: false,
            modal: false,
            user: '',
            password: ''

        };
        // 强制绑定this
        this.showModal = this.showModal.bind(this);
        this.hideModal = this.hideModal.bind(this);
        this.changePassword = this.changePassword.bind(this);
        this.changeUser = this.changeUser.bind(this);
        this.checkLogin = this.checkLogin.bind(this);
        this.logout = this.logout.bind(this);
    }
    showModal() {
        this.setState({
            modal: true
        })
    }
    checkLogin() {
        // 获取用户名以及密码，通过地址栏上携带的方式发送给服务器
        const { user, password } = this.state;
        const url = `http://www.dell-lee.com/react/api/login.json?user=${user}&password=${password}`;
        axios.get(url, { withCredentials: true }).then(res => {
            const login = res.data.data.login;
            console.log("点击OK后登录成功", login);
            // 服务器做出判断后返回数据，然后提示用户是否登录成功
            if (login) {
                message.success('登陆成功');
                this.setState({
                    login: true,
                    modal: false,
                })
            } else {
                message.error('登录失败');
            }
        }).then(res => {
            axios.get('http://www.dell-lee.com/react/api/isLogin.json', {
                withCredentials: true
            })
                .then(res => {
                    const login = res.data.data.login;
                    console.log("请求http://www.dell-lee.com/react/api/isLogin.json判断login登录状态:",login)
                })
        })
    }
    hideModal() {
        this.setState({
            modal: false
        })
    }
    changeUser(e) {
        // 用户名输入框输入后改变user数据，react改变数据后会自动重新渲染在页面上
        this.setState({
            user: e.target.value
        })
    }
    changePassword(e) {
        // 密码输入框输入后改变password数据，react改变数据后会自动重新渲染在页面上
        this.setState({
            password: e.target.value
        })
    }
    logout() {
        axios.get('http://www.dell-lee.com/react/api/logout.json', {
            withCredentials: true
        })
            .then(res => {
                const data = res.data.data;
                if (data.logout) {
                    this.setState({
                        login: false
                    });
                }
                // this.props.history.push('/');
            })
    }
    render() {
        const { login } = this.state;
        return (
            // 如果在已经登录则显示退出按钮，未登录则显示登录按钮
            <div className="login">
                {login ?
                    <Button type="primary" onClick={this.logout}>退出</Button> :
                    <Button type="primary" onClick={this.showModal}>登录</Button>
                }
                <Link to='/vip'>
                    <Button
                        type="primary"
                        style={{ marginLeft: 10 }}
                    >
                        Vip
                    </Button>
                </Link>
                <Modal
                    title="登陆"
                    visible={this.state.modal}
                    onOk={this.checkLogin}
                    onCancel={this.hideModal}
                >
                    <Input
                        placeholder='请输入用户名'
                        style={{ marginBottom: 10 }}
                        value={this.state.user}
                        onChange={this.changeUser}
                    />
                    <Input
                        placeholder='请输入密码'
                        type='password'
                        value={this.state.password}
                        onChange={this.changePassword}
                    />
                </Modal>
            </div>
        )
    }
    componentDidMount() {
        axios.get('http://www.dell-lee.com/react/api/isLogin.json', {
            withCredentials: true
        })
            .then(res => {
                const login = res.data.data.login;
                this.setState({ login })
            })
    }
}


export default Login;

vip下的index.js相关代码：

import React, { Component } from "react";
import { Redirect } from 'react-router-dom';
import axios from 'axios';
import "./style.css";

class Vip extends Component{
    constructor(props) {
        super(props);
        this.state = {
            login: true,
            fetchFinish: false
        }
    }

    render() {
        if (this.state.login) {
            if (this.state.fetchFinish) {
                return <div className='vip'>Vip</div>
            }else {
                return <div className='vip'>正在判断用户登陆状态...</div>
            }
        }else {
            return <Redirect to='/' />
        }
    }
    componentDidMount() {
        axios.get('http://www.dell-lee.com/react/api/isLogin.json', {
            withCredentials: true
        })
            .then(res => {
                const login = res.data.data.login;
                console.log("点击Vip按钮，再次请求http://www.dell-lee.com/react/api/isLogin.json判断login登录状态:",login);
                this.setState({
                    login,
                    fetchFinish: true
                })
            })
    }
}

export default Vip;

相关截图：