详解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学习笔记(一) 编写高质量代码
Aug 09 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
Apr 27 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 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的in_array低性能问题
2013/09/17 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JavaScript DOM事件(笔记)
2015/04/08 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
六十大寿答谢词
2014/01/12 职场文书
品牌服务方案
2014/06/03 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android