详解vue后台系统登录态管理


Posted in Javascript onApril 02, 2019

技术应用
js-cookie + vuex + localStorage 做数据持久化

js-cookie

npm i js-cookie --save

详解vue后台系统登录态管理

vuex

 详解vue后台系统登录态管理

user.js

import { login, logout } from '@/servers/login'
	import { getToken, setToken, removeToken } from '@/utils/auth' // 这是上面的js-cookie暴露出来的方法
	const user = {
  state: {
    userInfo: "",
    token: getToken(),
    roles: []
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    }
  },
  actions: {
    // 用户名登录
    login({ commit }, userInfo) {
      const userName = userInfo.userName.trim()
      return new Promise((resolve, reject) => {
        login({userName: userName, password: userInfo.password}).then(res 						=> {
          if (res.status.statusCode === 0) {
            const data = res.result
            commit('SET_TOKEN', data.token)
            setToken(data.token)
            localStorage.setItem('userInfo', JSON.stringify(data))
            resolve()
          }
          else {
            resolve(res.status.statusReason)
          }
          
        })
        .catch(error => {
          reject(error)
        })
      })
    },
    // 登出
    logout({ commit }, userId ) {
      return new Promise((resolve, reject) => {
        logout({id: userId}).then((res) => {
          if (res.status.statusCode === 0) {
            commit('SET_TOKEN', '')
            removeToken()
            localStorage.clear()
            resolve()
          }
          else {
            resolve(res.status.statusReason)
          }
        })
        .catch(error => {
          reject(error)
        })
      })
    }
  }
}
export default user

getter.js

const getters = {
  userInfo: state => state.user.userInfo
}

export default getters

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store

以上就是整个登录态的设定

在项目中的使用,如下
点击登录后

this.$store.dispatch('login', {userName: userName, password: password}).then((res) => {
		console.log(res)
		if(!res) {
			//	登录成功后的逻辑
		} else {
			//	登录失败后的逻辑
		}
	})

点击退出后

this.$store.dispatch('logout', userId).then((res) => {
	   if (!res) {
	    //	退出成功的逻辑
	   }
	   else {
	    //	退出失败的逻辑
	   }
	 })

需要特别注意的一点,vuex在页面刷新之后会消失掉.

以上所述是小编给大家介绍的vue后台系统登录管理详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 #Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 #Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 #Javascript
基于Vue插入视频的2种方法小结
Apr 02 #Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 #Javascript
小程序实现自定义导航栏适配完美版
Apr 02 #Javascript
es6 symbol的实现方法示例
Apr 02 #Javascript
You might like
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
js调用图片隐藏&显示实现代码
2013/09/13 Javascript
Jquery性能优化详解
2014/05/15 Javascript
javascript事件模型介绍
2016/05/31 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
老生常谈js数据类型
2017/08/03 Javascript
Mac下安装vue
2018/04/11 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
在Python下尝试多线程编程
2015/04/28 Python
python pandas库的安装和创建
2019/01/10 Python
Python多进程写入同一文件的方法
2019/01/14 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
运动会广播稿300字
2014/01/10 职场文书
项目投资意向书
2014/04/01 职场文书
2019年思想汇报
2019/06/20 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB