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 相关文章推荐
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
js实现鼠标切换图片(无定时器)
Jan 27 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
php 常用类整理
2009/12/23 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
详解javascript函数的参数
2015/11/10 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Python3 处理JSON的实例详解
2017/10/29 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
python文件路径操作方法总结
2020/12/21 Python
塔吉特百货公司官网:Target
2017/04/27 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
老人院义工活动感想
2015/08/07 职场文书
校园安全教育心得体会
2016/01/15 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android