react-08-05 优化登录功能

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
}
发布了49 篇原创文章 · 获赞 13 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/mengdeng19950715/article/details/99680248
今日推荐