详解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 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
vue.js中created方法作用
Mar 30 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
浅析JS运动
2015/12/28 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
three.js中文文档学习之创建场景
2017/11/20 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
使用graphics.py实现2048小游戏
2015/03/10 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
python中的set实现不重复的排序原理
2018/01/24 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
银行实习生的自我评价
2013/12/09 职场文书
电脑教师的自我评价
2013/12/18 职场文书
小区推广策划方案
2014/06/06 职场文书
Pillow图像处理库安装及使用
2022/04/12 Python