描述:
- 登录后,刷新后依然处于登录状态(维持登录)
- 登录后,关闭浏览器后打开浏览器访问依然是已经登录状态(自动登录)
- 登录后,访问登录路径自动跳转到管理界面
1.下载依赖
cnpm install store --save
2.utils/storageUtils.js
/*
* 进行local数据存储管理的工具模块
* */
import store from 'store'
const USER_KEY = 'user_key'
export default {
//保存
saveUser(user){
// localStorage.setItem(USER_KEY,JSON.stringify(user))
store.set(USER_KEY,JSON.stringify(user))
},
//读取
getUser(){
// return JSON.parse(localStorage.getItem(USER_KEY) || '{}')
return store.get(USER_KEY) || {}
},
//删除
deleteUser(){
// localStorage.removeItem(USER_KEY)
store.remove(USER_KEY)
}
}
3.login/Login.jsx
import {Redirect} from 'react-router-dom'
import storageUtils from '../../utils/storageUtils'
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 //保存在内存中
storageUtils.saveUser(user) //保存到local中
this.props.history.replace('/')
}else{//登录事变提示错误信息
message.error(result.msg)
}
//在render()中
//如果用户已经登录,则自动跳转到主界面
const user = memoryUtils.user
if(user && user._id){
return <Redirect to = '/'/>
}
4.src/index.js
/*
应用的入口组件:作用是渲染组件
* */
import React from 'react'
import ReactDOM from 'react-dom'
//import 'antd/dist/antd.css'
import App from './App'
import storageUtils from './utils/storageUtils'
import memoryUtils from './utils/memoryUtils'
//刷新页面时:读取local中保存user,保存到内存中
const user = storageUtils.getUser()
memoryUtils.user = user
//将App组件标签渲染到index页面的div上
ReactDOM .render(<App/>,document.getElementById('root'));