老师,我有问题请教
来源:7-4 项目作业
龙同學
2021-06-26 22:27:59
问题描述:
老师给的登录端口(http://www.dell-lee.com/react/api/isLogin.json)我登录成功后没有返回值回来,还是未登录时返回回来的值 false,刷新页面也重置登录状态了
相关代码:
import { Component } from 'react';
import { Modal, Button, Input, message } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import { Link, withRouter } from 'react-router-dom';
import axios from 'axios';
class Login extends Component {
constructor(props) {
super(props);
this.state = {
login: false,
isLoginModalVisible: false,
userName: '',
userPassWord: '',
};
this.handleLogin = this.handleLogin.bind(this);
this.handleLogout = this.handleLogout.bind(this);
this.handleOk = this.handleOk.bind(this);
this.handleCancel = this.handleCancel.bind(this);
this.userName = this.userName.bind(this);
this.userPassWord = this.userPassWord.bind(this);
}
handleLogin() {
this.setState({
isLoginModalVisible: true,
});
}
handleCancel() {
this.setState({
isLoginModalVisible: false,
});
}
// 老师,如果这里还想加上按下回车键也能登录是在哪里添加代码?
handleOk() {
const { userName, userPassWord } = this.state;
const url = `http://www.dell-lee.com/react/api/login.json?user=${userName}&password=${userPassWord}`;
axios
.get(url, {
withCredentials: true,
})
.then((res) => {
const login = res.data.data.login;
if (login) {
message.success('登陆成功');
this.setState({
login: true,
isLoginModalVisible: false,
});
} else {
message.error('登陆失败');
}
});
}
handleLogout() {
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('/');
});
}
userName(e) {
this.setState({
userName: e.target.value,
});
}
userPassWord(e) {
this.setState({
userPassWord: e.target.value,
});
}
render() {
const login = this.state.login;
return (
<div className="login" style={{ marginLeft: 1400 }}>
{login ? (
<Button type="primary" onClick={this.handleLogout}>
退出
</Button>
) : (
<Button type="primary" onClick={this.handleLogin}>
登录
</Button>
)}
<Link to="/vip">
<Button type="primary" onClick={this.handleVip} style={{ marginLeft: 10 }}>
VIP
</Button>
</Link>
<Modal
title="用户登录"
okText="登录"
cancelText="取消"
visible={this.state.isLoginModalVisible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Input placeholder="请输入你的用户名" value={this.state.userName} style={{ marginBottom: 10 }} onChange={this.userName} />
<Input.Password
placeholder="请输入你的密码"
value={this.state.userPassWord}
onChange={this.userPassWord}
iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
/>
</Modal>
</div>
);
}
componentDidMount() {
axios
.get('http://www.dell-lee.com/react/api/isLogin.json', {
withCredentials: true,
})
.then((res) => {
const login = res.data.data.login;
console.log(login);
this.setState({ login });
});
}
}
export default withRouter(Login);
1回答
好帮手慕星星
2021-06-27
同学你好,老师将提问的代码放进源码中测试是报错的,不能测试出想要的效果。可以看下私信,老师在私信中解决。
祝学习愉快!
相似问题