Vue项目使用localStorage+Vuex保存用户登录信息


Posted in Javascript onMay 27, 2019

本文实例为大家分享了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}}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
jQuery参数列表集合
Apr 06 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
简单的Jquery全选功能
Nov 07 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 #Javascript
深入浅出了解Node.js Streams
May 27 #Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 #Javascript
vue项目前端错误收集之sentry教程详解
May 27 #Javascript
了解javascript中变量及函数的提升
May 27 #Javascript
基于vue实现一个禅道主页拖拽效果
May 27 #Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
PHP新手上路(三)
2006/10/09 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
Python中optparse模块使用浅析
2015/01/01 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
名企HR怎样看待求职信
2014/02/23 职场文书
促销活动方案模板
2014/02/24 职场文书