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 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
深入理解js中this的用法
May 28 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
js实现3D图片展示效果
Mar 09 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
js模拟实现百度搜索
Jun 28 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+DBM的同学录程序(5)
2006/10/09 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
Python中Collection的使用小技巧
2014/08/18 Python
Python切片知识解析
2016/03/06 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python先序遍历二叉树问题
2017/11/10 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
校园新闻广播稿
2014/01/10 职场文书
12岁生日感言
2014/01/21 职场文书
公司门卫岗位职责
2014/03/15 职场文书
抗震救灾标语
2014/06/26 职场文书
买房协议书范本
2014/10/23 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
重温入党誓词主持词
2015/06/29 职场文书
导游词之南京中山陵
2019/11/27 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python