详解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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
js 判断脚本加载完毕的代码
Jul 13 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
详解javascript常用工具类的封装
Jan 30 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使用curl模拟登录后采集页面的例子
2013/11/04 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
python实现将内容分行输出
2015/11/05 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
django 模版关闭转义方式
2020/05/14 Python
Python 解决相对路径问题:"No such file or directory"
2020/06/05 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
国际象棋商店:The Chess Store
2018/07/09 全球购物
init进程的作用
2015/08/20 面试题
秋季运动会活动方案
2014/02/05 职场文书
股份合作协议书范本
2014/04/14 职场文书
语文教师个人工作总结
2015/02/06 职场文书
民事代理词范文
2015/05/25 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
使用python向MongoDB插入时间字段的操作
2021/05/18 Python