front/src/store/modules/user.js

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