加上withcredentials: true后,依旧实现不了刷新后,获取正确登录状态
import React, { Component } from 'react'
import { Button, Modal, Input, message } from 'antd'
import { Link } from 'react-router-dom'
import axios from 'axios'
class Login extends Component {
constructor(props) {
super(props)
this.state = {
login: false,
modal: false,
userNumber: '',
password: ''
}
this.showModal = this.showModal.bind(this)
this.handleLogin = this.handleLogin.bind(this)
this.handleCancle = this.handleCancle.bind(this)
this.changeUserNumber = this.changeUserNumber.bind(this)
this.changePassword = this.changePassword.bind(this)
}
showModal() {
this.setState({
modal: true
})
}
handleLogin() {
let url = `http://www.dell-lee.com/react/api/login.json?user=${this.state.userNumber}&password=${this.state.password}`
axios.get(url, {
withcredentials: true
}).then(res => {
if (res.data.data.login) {
message.success('登录成功')
this.setState({
login: true,
modal: false
})
} else {
message.error('登录失败,请检查账户密码是否正确')
}
})
}
handleCancle() {
this.setState({
modal: false
})
}
changeUserNumber(e) {
this.setState({
userNumber: e.target.value
})
}
changePassword(e) {
this.setState({
password: e.target.value
})
}
componentDidMount() {
axios.get('http://www.dell-lee.com/react/api/isLogin.json', {
withCredentials: true
}).then(res => {
let { login } = res.data.data
this.setState({ login })
})
}
render() {
return (
<div>
<div style={{ marginBottom: 10 }}>
{this.state.login ?
<Button type="primary">退出</Button> :
<Button type="primary"
onClick={this.showModal}
>登录</Button>
}
<Link to="/vip" style={{marginLeft:10}}>
<Button type="primary"
>Vip</Button>
</Link>
</div>
<Modal
title="登录"
visible={this.state.modal}
onOk={this.handleLogin}
onCancel={this.handleCancle}
>
<Input placeholder="请输入用户名"
style={{ marginBottom: 10 }}
value={this.state.userNumber}
onChange={this.changeUserNumber} />
<Input.Password
placeholder="请输入密码"
value={this.state.password}
onChange={this.changePassword} />
</Modal>
</div>
)
}
}
export default Login22
收起
正在回答 回答被采纳积分+1
2回答
精慕门8328450
2020-06-09 17:20:02
朋友,大小写写错了吧
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星