输入admin返回login为false

输入admin返回login为false

# 报错信息的截图
http://img1.sycdn.imooc.com//climg/5fabbb0e0992af5414200426.jpg
# 粘贴全部相关代码,切记添加代码注释(请勿截图)

import React, { Component, Fragment } from 'react';

import axios from 'axios';

import './login.css';

import { Modal, Button, Input } from 'antd';


class Login extends Component {

    constructor(props) {

        super(props)


        this.showModal = this.showModal.bind(this);

        this.handleOk = this.handleOk.bind(this);

        this.handleCancel = this.handleCancel.bind(this);

        this.handleUserChange = this.handleUserChange.bind(this);

        this.handlePasswordChange = this.handlePasswordChange.bind(this);



        this.state = {

            login : false,

            visible: false,

            user : '',

            password : ''

        }

    }

    // 模特框的显示 隐藏事件 start

    showModal() {

        this.setState({

          visible: true,

        });

      };

    

    handleOk() {

        const { user, password } = this.state;

        const url = `http://www.dell-lee.com/react/api/isLogin.json?user=${user}&password=${password}`;

        axios.get(url)

            .then(res => {

                console.log(res);

            })

    };

        

    handleCancel() {

        this.setState({

            visible: false,

        });

    }

    // 模特框的显示 隐藏事件 end


    // input框value值改变事件

    handleUserChange(e) {

        this.setState({

            user : e.target.value

        })

    }

    handlePasswordChange(e) {

        this.setState({

            password : e.target.value

        })

    }

    render() {

        const login = this.state.login;

        return (

            <Fragment>

                <div className="login">

                    {

                        login == true ? <Button type="primary">退出</Button>

                                      : <Button type="primary" onClick={this.showModal}>登录</Button>

                    }

                </div>

                <Modal

                    title="登录"

                    visible={this.state.visible}

                    onOk={this.handleOk}

                    onCancel={this.handleCancel}

                >

                    <Input placeholder="请输入用户名" style={{marginBottom: '10px'}}

                           value={this.state.user}  onChange={this.handleUserChange}  

                    />

                    <Input placeholder="请输入密码" type="password" 

                           value={this.state.password} onChange={this.handlePasswordChange}

                    />

                </Modal>

            </Fragment>

        )

    }


    componentDidMount() {

        axios.get('http://www.dell-lee.com/react/api/isLogin.json')

            .then(res => {

                this.setState({

                    login : res.data.data.login

                })

            })

    }

}


export default Login;


正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,老师昨天测试的时候,可能浏览器有缓存,所以登录结果显示true,刚刚再次测试,发现返回结果是false。由于登录的接口地址是http://www.dell-lee.com/react/api/login.json,同学的接口地址写错了,所以结果不正确,如下:

http://img1.sycdn.imooc.com//climg/5fac93440998888d11890261.jpg

祝学习愉快!

  • 慕标1234374 提问者 #1
    好的,谢谢老师
    2020-11-12 11:33:31
提问者 慕标1234374 2020-11-12 09:29:23
好帮手慕久久 2020-11-11 19:00:03

同学你好,老师测试你的代码,可以登录成功:

http://img1.sycdn.imooc.com//climg/5fabc393094e6a3313000590.jpg

由于Chrome版本升级后,对跨域默认的安全策略改变了,它默认不允许请求接口时携​带cookie,所以可能是浏览器的问题,导致无法登录成功。建议手动修改一下策略:打开谷歌浏览器,地址栏输入chrome://flags/ ,然后再弹出的页面中输入SameSite,把第一个改为disable:

http://img1.sycdn.imooc.com//climg/5fabc3fe09b3241c00000000.jpg

修改后,再重启浏览器试试。

祝学习愉快!

  • 提问者 慕标1234374 #1
    老师,我改了重启了几遍,还是返回false。。
    2020-11-12 09:29:08
  • 提问者 慕标1234374 #2
    我用其他浏览器也是返回false,会不会是接口数据的问题呢
    2020-11-12 09:37:27
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师