详解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 tips提示框组件实现代码
Nov 19 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
Javascript中神奇的this
Jan 20 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
Angular2之二级路由详解
Aug 31 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
微信小程序保存多张图片的实现方法
Mar 05 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
表格 隔行换色升级版
2009/11/07 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
python生成器表达式和列表解析
2016/03/10 Python
python的exec、eval使用分析
2017/12/11 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python 多个参数不为空校验方法
2019/02/14 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
幼儿园托班开学寄语
2014/01/18 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
家长寄语大全
2014/04/02 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
Java 写一个简单的图书管理系统
2022/04/26 Java/Android