Vue项目使用localStorage+Vuex保存用户登录信息
前端  /  管理员 发布于 4年前   552
本文实例为大家分享了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}}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号