Vue实现登陆并使用Vuex保存用户信息功能，直接上代码吧，注释都写的清楚！

// 设置路由跳转的登陆守卫
router.beforeEach((to, from, next) => {
  // 先读缓存模拟登陆
  const user = sessionStorage.getItem('user')
  const nll = null
  // 注销登陆
  if (to.name === 'Logout') {
    // 清空缓存
    sessionStorage.clear()
    // 跳转登陆
    next('/login')
  } else if (to.name === 'Login') {
    // 判断是否为空--是否登陆，登陆直接跳首页
    if (user !== nll) {
      next('/')
    }
  } else if (user === nll) {
    next('/login')
  }
  next()
})

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 读取缓存，没有就设置空
  state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
    user: {
      user: ''
    }
  },
  // 获取user
  getters: {
    getUser (state) {
      return state.user
    }
  },
  // 唯一可以修改state
  mutations: {
    updataUser (state, user) {
      state.user = user
    }
  },
  // 异步执行mutations方法
  actions: {
    asyncUpdataUser (context, user) {
      context.commit('updataUser', user)
    }
  },
  modules: {
  }
})

// 所有的都验证完成，并且成功，直接执行这句话，跳转并且用Vuex保存用户
 this.$store.dispatch('asyncUpdataUser', { name: formName.account })

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {},
  // 第一种解决Vuex刷新数据丢失
  mounted () {
    // 全局监听刷新，刷新就执行saveState写入本地缓存
    window.addEventListener('unload', this.saveState)
  },
  methods: {
    saveState () {
      // 缓存vuex的state数据
      sessionStorage.setItem('state', JSON.stringify(this.$store.state))
    }
  }
  // 第二种解决Vuex刷新数据丢失，iphone使用beforeunload无效所以我没有用
  // created () {
  //   // 在页面加载时读取sessionStorage里的状态信息
  //   if (sessionStorage.getItem('store')) {
  //     this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
  //   }

  //   // 在页面刷新时将vuex里的信息保存到sessionStorage里
  //   window.addEventListener('beforeunload', () => {
  //     sessionStorage.setItem('store', JSON.stringify(this.$store.state))
  //   })
  // }
}
</script>