react项目 实现维持登录与自动登录（刷新后依然处于登录状态）store 包 插件 的应用

描述：

1. 登录后，刷新后依然处于登录状态（维持登录）
2. 登录后，关闭浏览器后打开浏览器访问依然是已经登录状态(自动登录)
3. 登录后，访问登录路径自动跳转到管理界面

1.下载依赖

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'));