老师为什么我的登录了还是无法打卡vip页面
来源：7-4 项目作业
清辞_
2020-03-20 18:44:34
login代码：
import React 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 React.Component {
constructor(props) {
super(props)
this.showModal = this.showModal.bind(this)
this.hideModal = this.hideModal.bind(this)
this.changeUser = this.changeUser.bind(this)
this.changePassword = this.changePassword.bind(this)
this.checkLogin = this.checkLogin.bind(this)
this.logout = this.logout.bind(this)
this.state = {
login: false,
modal: false,
user: '',
password: ''
}
}
showModal() {
this.setState({
modal: true
})
}
hideModal() {
this.setState({
modal: false
})
}
changeUser(e) {
this.setState({
user: e.target.value
})
}
changePassword(e) {
this.setState({
password: e.target.value
})
}
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;
if (login) {
message.success('登录成功')
this.setState({
login: true,
modal: false
})
}else {
message.error('登录失败')
}
})
}
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 withRouter(Login)
vip代码：
import React from 'react';
import { Redirect } from 'react-router-dom';
import axios from 'axios';
import './style.css';
class Vip extends React.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
this.setState({
login,
fetchFinish: true
})
})
}
}
export default Vip
1回答
-
好帮手慕星星
2020-03-20
同学你好，老师将这两段代码替换掉源码中的进行测试，效果是没有问题的。登录之后vip页面可以打开
自己再测试下，或者也替换掉源码进行测试。
祝学习愉快！
0
相似问题