import { getInfo, login, logout } from '@/api/login' import auth from '@/utils/auth' import Vue from 'vue' import cacheMixin from '@/components/Cache/mx-cache-mixin' import { MessageBox } from 'element-ui' import router from '@/router' const user = { state: auth.getUserInfo(), mutations: { RELOAD: (state, newInfo) => { console.log('RELOAD - build user reactive features', state, newInfo) Object.keys(newInfo).forEach(key => { if (!state.hasOwnProperty(key)) { // NOTE:使用Vue.set动态添加监控属性 Vue.set(state, key, newInfo[key]) } state[key] = newInfo[key] }) } }, actions: { // 登录 Login({ dispatch, commit, state }, userInfo) { const username = userInfo.username.trim() const password = userInfo.password return new Promise((resolve, reject) => { login(username, password).then(res => { auth.setToken(res.token) // 登陆后强制更新Info return dispatch('GetInfo') }).then(res => { // 登陆后强制更新routes return dispatch('CheckRoutes', true) }).then(_ => { resolve(state.user) }).catch(error => { reject(error) }) }) }, // 获取用户信息 GetInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo().then(res => { const user = res.data user.avatar = user.avatar || require('@/assets/images/profile.png') user.token = auth.getToken() // 这样就可以让token具有响应性(reactive) commit('RELOAD', user) auth.setUserInfo(user) cacheMixin.methods.clearUserCache() // NOTE:纯作为静态方法在调用,有更优雅的方式? resolve(res) }).catch(error => { reject(error) }) }) }, // 退出系统 LogOut({ dispatch, commit, state }) { return MessageBox.confirm('确定注销并退出系统吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(_ => { return logout() }).then(_ => { // 清除token,清除真正的登陆状态判定数据 auth.removeToken() state.token = '' // 清除routers缓存,则路由劫持事件会根据状态,重新加载路由 dispatch('CheckRoutes', true) return router.push('/') }) } } } export default user