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

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 

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

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 {	    //	退出失败的逻辑	   }	 })