vue-element-admin使用

      module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    overlay: {
      warnings: false,
      errors: true
    }
    before: require('./mock/mock-server.js') //删除
  },
    

      import { mockXHR } from '../mock'
if (process.env.NODE_ENV === 'production') {
  mockXHR()
}
    

      // api/user.js
export function login(data) {
  return request({
    url: '/api/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/api/user/getInfo',
    method: 'get',
    params: { token }
  })
}
    

      // .env.development
VUE_APP_BASE_API = 'http://localhost:8101/'
    

      // create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

//axios响应拦截器
 if (res.code !== 0) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 40100) {
        // to re-login
        MessageBox.confirm('登录超时', 'Confirm logout', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
    

        // user login
  login({ commit }, userInfo) {
    const { userAccount, userPassword } = userInfo
    return new Promise((resolve, reject) => {
      login({ userAccount: userAccount.trim(), userPassword: userPassword }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response

        if (!data) {
          reject('Verification failed, please Login again.')
        }

        const { userRole, userName, userAvatar, userProfile } = data

        // roles must be a non-empty array
        if (!userRole || userRole.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }

        commit('SET_ROLES', userRole)
        commit('SET_NAME', userName)
        commit('SET_AVATAR', userAvatar)
        commit('SET_INTRODUCTION', userProfile)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },
    

       userAvatar: state => state.user.userAvatar,
  userName: state => state.user.userName,
  userProfile: state => state.user.userProfile,
  userRole: state => state.user.userRole,
    

       if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasRoles = store.getters.userRole && store.getters.userRole.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
           //将原本的roles改成userRole，跟后端一致
          const { userRole } = await store.dispatch('user/getInfo')

          const accessRoutes = await store.dispatch('permission/generateRoutes', userRole)

          router.addRoutes(accessRoutes)
          next({ ...to, replace: true })
        } catch (error) {
          await store.dispatch('user/resetToken')
            // 将error改成error.message
          Message.error(error.message || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
        
        
    

       loginForm: {
        userAccount: '',
        userPassword: ''
      },
      loginRules: {
        userAccount: [{ required: true, trigger: 'blur', validator: validateUsername }],
        userPassword: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
    

       const validateUsername = (rule, value, callback) => {
    // 将!validUsername(value)改成value.length < 4
      if (value.length < 4) {
        callback(new Error('用户名不少于4位'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不少于4位'))
      } else {
        callback()
      }
    }