时间:2021-05-26
本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码,供大家参考,具体内容如下
api.js
import axios from 'axios'const baseURL = 'http://XXX// 全局的 axios 默认值axios.defaults.baseURL = baseURL// 登录请求const loginCheck = params => { return axios.post('/login', params).then(res => { return res.data })}export { loginCheck }store.js
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const actions = {}const mutations = { handleUserName: (state, user_name) => { state.user_name = user_name // 把登录的用户的名保存到localStorage中,防止页面刷新,导致vuex重新启动,用户名就成为初始值(初始值为空)的情况 localStorage.setItem('user_name', user_name) }}const state = { user_name: '' || localStorage.getItem('user_name')}// getters 只会依赖 state 中的成员去更新const getters = { userName: (state) => state.user_name}const store = new Vuex.Store({ actions, mutations, state, getters})export { store }login.vue
methods:{ login(formName){ this.$refs[formName].validate((valid) => { if (valid) { // 调用登录请求接口 loginCheck(this.form).then(res=>{ // console.log(res); // 登录成功,提示成功信息,然后跳转到首页,同时将token保存到localstorage中, 将登录名使用vuex传递到Home页面 if(res.meta.status === 200){ // 提示成功信息 this.$message({ message: res.meta.msg, type: 'success' }); var that = this; // 跳转到首页 setTimeout(function(){ that.$router.push({name:'Home'}) },1000) localStorage.setItem('token',res.data.token) // 将登录名使用vuex传递到Home页面 this.$store.commit('handleUserName',res.data.username); }else{ // 登录失败,就提示错误信息 this.$message({ message: '登录失败,'+res.meta.msg, type: 'error' }); } }) } else { return false; } }); } }Home.vue
您好,{{$store.getters.username}}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
页面刷新后,想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后,vuex便可以被应用了
vue2.0+vuex+localStorage待办事项源码:https://github.com/Mynameisfwk/vue-Todo-list参考代码:
1.实现思路(1)设置锁屏密码(2)密码存localStorage(本项目已经封装h5的sessionStorage和localStorage)(3)vuex设
vue的项目的登录状态如果用vuex状态管理,页面一刷新vuex管理的状态就会消失,这样登录路由验证就没有意义了。可以将登录的状态写到webStorage中进行
开启倒计时,直接保存到vuex中,且存储到本地持久化//state.jsconstrunTime=localStorage.getItem('time');pa