登录模块（自动登录）

render里面要直接跳到某个页面要用return <Redirect to="/" />   不用this.props.history.replace(‘/‘);  因为render里面必定return

this.props.history.replace用在点击回调事件里面

1.admin.js里面

<script>
   render() {
        //读取保存的user ,如果不存在直接跳转到登录页面
        const user = JSON.parse(localStorage.getItem(‘user_key‘) || ‘{}‘)　　　　//const user= memoryUtils.user  后期改进版
        if (!user._id) {
            // this.props.history.replace(‘/login‘) //事件回调中使用
            return <Redirect to="/login" />
        }

</script>

2.login.js里面

<script>

 if(res.code === ‘0000‘){
              //跳转到管理页面
              const user = res.data
              localStorage.setItem(‘user_key‘,JSON.stringify(user)) 

//storageUtils.saveUser(user) 改进版

　　　　　　　　//memoryUtils.user=user  终极版（增加）

this.props.history.replace(‘/‘)
              message.success(‘登录成功‘)
            }else{
              message.error(res.msg) //res.msg后端返回的信息
            }

render() {
      const user = JSON.parse(localStorage.getItem(‘user_key‘) || ‘{}‘)　　　　//const user = memoryUtils.user 终极版

//改进版：const user = storageUtils.getUser()

if (user._id) {
          return <Redirect to="/" />
      }

</script>

封装保存用户，读取用户，删除用户为方法

<script>

const USER_KEY = ‘user_key‘
export default {
    //返回user对象，如果没有返回{}
    getUser() {
        return JSON.parse(localStorage.getItem(USER_KEY)||‘{}‘)
    },
    //保存user
    saveUser(user) {
        localStorage.setItem(USER_KEY,JSON.stringify(user))
    },
    //删除user
    removeUser() {
        localStorage.removeItem(USER_KEY)
    }
}

</script>

github有个库  叫store.js  比较兼容  比原生localstorage兼容

<script>

import store from ‘store‘
const USER_KEY = ‘user_key‘
export default {
    //返回user对象，如果没有返回{}
    getUser() {
        // return JSON.parse(localStorage.getItem(USER_KEY)||‘{}‘)
        return store.get(USER_KEY) || {}  //store.get(USER_KEY)是已经解析好了的   所以之间后面写{}
    },
    //保存user
    saveUser(user) {
        // localStorage.setItem(USER_KEY,JSON.stringify(user))
        store.set(USER_KEY,user)
    },
    //删除user
    removeUser() {
        // localStorage.removeItem(USER_KEY)
        store.removeItem(USER_KEY)

    }
}

</script>

优化：每次都去storage里存取，到文件去存取比较慢，直接在内存在存取快，所以创建一个memoryUtils

memoryUtils.js

<script>

import storageUtils from "./storageUtils";

export default{
    user:storageUtils.getUser()//用来存储登录用户信息，默认没有登录.初始值为local中读取的
    //什么时候才有值，当然是尽早的到localstorage里去拿值，index.js是入口文件，可以在这里，但也可以在不同组件中引入
}

</script>

原文地址：https://www.cnblogs.com/lucy-xyy/p/11830218.html