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 相关文章推荐
ExtJS 入门
Oct 29 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
JS实现520 表白简单代码
May 21 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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中文字符串截取方法实例总结
2014/09/30 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
php中namespace及use用法分析
2016/12/06 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
Vue实现购物车实例代码两则
2020/05/30 Javascript
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
Python join()函数原理及使用方法
2020/11/14 Python
当当网软件测试笔试题
2015/11/24 面试题
优秀体育委员自荐书
2014/01/31 职场文书
2014年教师节寄语
2014/04/03 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
护士节活动总结
2014/08/29 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis