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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
从Ajax到JQuery Ajax学习
Feb 14 Javascript
js 判断脚本加载完毕的代码
Jul 13 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php cli配置文件问题分析
2015/10/15 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
答题辅助python代码实现
2018/01/16 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
python中二分查找法的实现方法
2020/12/06 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
环境科学专业大学生自荐信格式
2013/09/21 职场文书
临床医学专业个人的自我评价
2013/09/27 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
JS中一些高效的魔法运算符总结
2021/05/06 Javascript