Vuex保存用户信息(定时过期)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。详细可见vuex介绍用户信息定时过期操作原理由于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: '<App/>'
})
三、新建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()
})
},
更多推荐
已为社区贡献6条内容
所有评论(0)