opms_frontend/src/store/modules/user.js

/**
 * @description 登录、获取用户信息、退出登录、清除token逻辑，不建议修改
 */
import to from 'await-to-js'
import Vue from 'vue'
import userApi from '@/api/system/user'
import { getToken, removeToken, setToken } from '@/utils/token'
import { resetRouter } from '@/router'
import { isArray, isString } from '@/utils/validate'
import { title, tokenName } from '@/config'
import watermark from 'watermark-dom'

const state = () => ({
  id: '',
  token: getToken(),
  username: '游客',
  nickName: '',
  phone: '',
  avatar: require('@/assets/login_images/user_avatar.png'),
  isFirstLogin: false,
  roleKeys: [],
})
const getters = {
  id: (state) => state.id,
  token: (state) => state.token,
  username: (state) => state.username,
  nickName: (state) => state.nickName,
  phone: (state) => state.phone,
  avatar: (state) => state.avatar,
  isFirstLogin: (state) => state.isFirstLogin,
  roleKeys: (state) => state.roleKeys,
}
const mutations = {
  /**
   * @description 设置token
   * @param {*} state
   * @param {*} token
   */
  setToken(state, token) {
    state.token = token
    setToken(token)
  },
  setIsFirstLogin(state, isFirstLogin) {
    state.isFirstLogin = isFirstLogin
    localStorage.setItem('isFirstLogin', isFirstLogin)
  },
  /**
   * @description 设置用户名
   * @param {*} state
   * @param {*} username
   */
  setUsername(state, username) {
    state.username = username
  },
  setNickName(state, nickName) {
    state.nickName = nickName
  },
  setPhone(state, phone) {
    state.phone = phone
  },
  setUserId(state, id) {
    state.id = id
  },
  /**
   * @description 设置头像
   * @param {*} state
   * @param {*} avatar
   */
  setAvatar(state, avatar) {
    state.avatar = avatar
  },
  setRoleKeys(state, roleKeys) {
    state.roleKeys = roleKeys
  },
}
const actions = {
  /**
   * @description 登录拦截放行时，设置虚拟角色
   * @param {*} { commit, dispatch }
   */
  setVirtualRoles({ commit, dispatch }) {
    dispatch('acl/setFull', true, { root: true })
    commit('setAvatar', require('@/assets/login_images/user_avatar.png'))
    commit('setUsername', 'admin(未开启登录拦截)')
  },
  /**
   * @description 登录
   * @param {*} { commit }
   * @param {*} userInfo
   */
  async login({ commit }, userInfo) {
    const {
      data: { [tokenName]: token, isFirstLogin },
    } = await userApi.login(userInfo)
    if (token) {
      commit('setIsFirstLogin', isFirstLogin)
      commit('setToken', token)
      const hour = new Date().getHours()
      const thisTime =
        hour < 8 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 18 ? '下午好' : '晚上好'
      Vue.prototype.$baseNotify(`欢迎登录${title}`, `${thisTime}！`)
    } else {
      const err = `登录接口异常，未正确返回${tokenName}...`
      Vue.prototype.$baseMessage(err, 'error', 'vab-hey-message-error')
      throw err
    }
  },
  /**
   * @description 获取用户信息接口 这个接口非常非常重要，如果没有明确底层前逻辑禁止修改此方法，错误的修改可能造成整个框架无法正常使用
   * @param {*} { commit, dispatch, state }
   * @returns
   */
  async getUserInfo({ commit, dispatch }) {
    // const {
    //   data: { username, avatar, roles, permissions },
    // } = await userApi.getUserInfo()
    // console.log(username, avatar, roles, permissions)

    const res = await userApi.getUserInfo()
    const { id, userName, nickName, phone, avatar } = res.data.entity
    const { roleIds, roleKeys, permissions } = res.data
    /**
     * 检验返回数据是否正常，无对应参数，将使用默认用户名,头像,Roles和Permissions
     * username {String}
     * avatar {String}
     * roles {List}
     * ability {List}
     */
    if (
      (userName && !isString(userName)) ||
      (avatar && !isString(avatar)) ||
      (nickName && !isString(nickName)) ||
      (phone && !isString(phone)) ||
      (roleKeys && !isArray(roleKeys)) ||
      (roleIds && !isArray(roleIds)) ||
      (permissions && !isArray(permissions))
    ) {
      const err = 'getUserInfo核心接口异常，请检查返回JSON格式是否正确'
      Vue.prototype.$baseMessage(err, 'error', 'vab-hey-message-error')
      throw err
    } else {
      // 如不使用username用户名,可删除以下代码
      if (id) commit('setUserId', id)
      // 如不使用username用户名,可删除以下代码
      if (userName) commit('setUsername', userName)
      if (nickName) commit('setNickName', nickName)
      if (phone) commit('setPhone', phone)
      // 如不使用avatar头像,可删除以下代码
      if (avatar) commit('setAvatar', avatar)
      // 如不使用roles权限控制,可删除以下代码
      if (roleIds) dispatch('acl/setRole', roleIds, { root: true })
      if (roleKeys) commit('setRoleKeys', roleKeys)
      // 如不使用permissions权限控制,可删除以下代码
      if (permissions) dispatch('acl/setPermission', permissions, { root: true })

      watermark.init({ watermark_txt: nickName + phone, watermark_width: 150, watermark_alpha: 0.08 })
    }
  },
  /**
   * @description 退出登录
   * @param {*} { dispatch }
   */
  async logout({ dispatch }) {
    await to(userApi.logout())
    await dispatch('resetAll')
  },
  /**
   * @description 重置token、roles、permission、router、tabsBar等
   * @param {*} { commit, dispatch }
   */
  async resetAll({ commit, dispatch }) {
    commit('setUsername', '游客')
    commit('setAvatar', require('@/assets/login_images/user_avatar.png'))
    commit('routes/setRoutes', [], { root: true })
    await dispatch('setToken', '')
    await dispatch('acl/setFull', false, { root: true })
    await dispatch('acl/setRole', [], { root: true })
    await dispatch('acl/setPermission', [], { root: true })
    await dispatch('tabs/delAllVisitedRoutes', null, { root: true })
    await resetRouter()
    removeToken()
    watermark.init({ watermark_txt: '            ' })
    watermark.remove()
  },
  /**
   * @description 设置token
   * @param {*} { commit }
   * @param {*} token
   */
  setToken({ commit }, token) {
    commit('setToken', token)
  },
  /**
   * @description 设置头像
   * @param {*} { commit }
   * @param {*} avatar
   */
  setAvatar({ commit }, avatar) {
    commit('setAvatar', avatar)
  },
}
export default { state, getters, mutations, actions }