1.Login.jsx
将用户信息保存到内存中
import memoryUtils from '../../utils/memoryUtils'
const result =await reqLogin(username,password)
//const result = response.data //{status:0,data: user} {status:1,message: 'xxx'}
if (result === 0){ //登录成功
//提示成功
message.success('登录成功')
//跳转到后台管理界面(不需要再回退了,否则用push())
const user = result.user
//如何显示用户信息呢?需要储存起来
memoryUtils.user = user //保存在内存中
this.props.history.replace('/')
}else{//登录事变提示错误信息
message.error(result.msg)
}
2.admin.jsx
import React,{Component} from 'react'
import {Redirect} from 'react-router-dom'
import memoryUtils from '../../utils/memoryUtils'
/*后台管理的路由组件*/
export default class Admin extends Component{
render(){
const user = memoryUtils.user
//如果内存没有存储user====》当前没有登录
if(!user || !user._id){
//自动跳转到登录界面(在render()中),在事件回调函数中使用的是history的replace()或push()
return <Redirect to='/login'/>
}
return (
<div>
hello {user.username}
</div>
)
}
}
3.utils/memoryUtils.js
/*
* 用来在内存中保存一些数据的工具模块
* */
export default {
user:{} //保存当前登录的user
}