Vuex保存用户信息(定时过期)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。详细可见vuex介绍

用户信息定时过期操作原理
由于vuex全部变量每次刷新都会消失，无法缓存用户信息，所以采用localStorage本地存储用户信息，但localStorage 存储却无法控制失效（永久不失效），于是在客户登录后，记录下客户登录时间，下次打开时，判断客户登录时间是否超时（需要定义1个超时时间，这里是3分钟测试，也可以改造成每日都必须登录），超时则清除本地存储的用户信息，并弹出登录页

一、安装vuex

npm install vuex --save

二、main.js 引入vuex

import store from './vuex'
import router from './router'

Vue.config.productionTip = false

Vue.use(Vant);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

三、新建vuex目录，目录下新建index.js

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

Vue.use(Vuex)

const user_key = 'user'
const user_time = 'user_time'
const useValidTime = 3 * 60 *1000; //毫秒 设置用户过期时长 测试3分钟

const store = new Vuex.Store({
    // 全局变量
    state: {
        userInfo: null
    },
    getters: {
      userInfo: function (state) {
        if (!state.userInfo) {
          //获取内存用户信息
          let info = JSON.parse(localStorage.getItem(user_key))
          if(info)
          {
            //获取用户登录时间
            let strtime =  localStorage.getItem(user_time)
            if(strtime)
            {
              //计算过期时间
              let vaildtime = Number(strtime) + useValidTime
              let timespan = Date.parse(new Date())

              console.log(vaildtime + ',' + timespan)
              if(timespan < vaildtime)
              {
                console.log("用户未过期")
                state.userInfo = info;
                return state.userInfo
              }
            }

            console.log("用户已过期")
            localStorage.setItem(user_key, null);
          }
        }
        return state.userInfo
      }
    },
    // 修改全局变量必须通过mutations中的方法
    // mutations只能采用同步方法
    mutations: {
        login (state, payload) {
          state.userInfo = payload
          localStorage.setItem(user_key, JSON.stringify(payload));
          //保存 用户登录时间
          let timespan = Date.parse(new Date())
          localStorage.setItem(user_time, timespan);
        },
        logout (state) {
          state.userInfo = null
          localStorage.setItem(user_key, null);
        }
    },
    // 异步方法用actions
    // actions不能直接修改全局变量，需要调用commit方法来触发mutation中的方法
    actions: {
        login (context, payload) {
            context.commit('login', payload)
        },
        logout (context) {
            context.commit('logout')
        }
    }
})

export default store

四、用户登录操作

 methods: {
    loginEnter()
    {
      let data = new Object()
      data.id = 1;
      data.name = "测试";
      that.loginSuccess(data)
    },
    loginSuccess(data){
      // dispatch采用Promise链式调用                         
      that.$store.dispatch('login', data).then(() => {
        if(backlink)
        {
          that.$router.push(backlink);
        }
        else{
          that.$router.go(-1);
        }
      })
    },
  }

五、主页监听用户信息及退出

监听用户信息

 computed: {
    userInfo () {
      //return that.$store.state.userInfo
      return that.$store.getters.userInfo;
    }
  },

退出登录

loginOut()
    {
      that.$store.dispatch('logout').then(() => {
        that.loginIn()
      })
    },