登陸模塊（自動登陸）

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>