OneDayDay/src/function-namespace/auth/LoginFunc.js

import auth from '@/api/auth'
import utils from '@/utils/utils'
import router from '../../router/index'
import Vue from 'vue'

// 登录表单数据信息
const loginForm = {
  username: '',
  password: '',
  // 验证码
  code: ''
}
// 自定义验证码校验规则
const validateCode = (rule, value, callback) => {
  // 验证码不区分大小写
  if (value.toString().toLocaleLowerCase() !== code.toString().toLocaleLowerCase()) {
    callback(new Error('验证码输入错误'))
  } else {
    callback()
  }
}
// 登录表单的校验规则
const loginFormRules = {
  username: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      min: 5,
      message: '密码不能小于5个字符',
      trigger: 'blur'
    }
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur'
    },
    {
      validator: validateCode,
      trigger: 'blur'
    }
  ]
}
// 后台验证码id
let codeId
// 后台的验证码
let code
// 获取后台验证码
const getCode = () => {
  auth.getCode(codeId).then(resp => {
    code = resp.data
  })
}
// 点击图片刷新验证码
const changeCode = () => {
  const codeImg = document.querySelector('#code')
  codeId = utils.getRandomId()
  codeImg.src = `${process.env.VUE_APP_CAPTCHA_URL}/util/getCodeImg?id=` + codeId
  codeImg.onload = () => getCode()
}
const toRegisterPage = () => {
  router.push('/register')
}
// 登录
const login = (formEl) => {
  utils.validFormAndInvoke(formEl, () => {
    auth.login(loginForm).then(resp => {
      if (resp.code === 200) {
        localStorage.setItem('authorization', resp.data)
        Vue.prototype.$notify({
          title: 'Tips',
          message: '登陆成功^_^',
          type: 'success',
          duration: 2000
        })
        router.push('/index')
      }
    }).catch(err => {
      console.log(err)
      // 请求出错
      changeCode()
      getCode()
      Vue.prototype.$notify({
        title: 'Tips',
        message: err.response.data.errMsg,
        type: 'error',
        duration: 2000
      })
    })
  })
}

export default {
  loginForm,
  loginFormRules,
  code,
  getCode,
  changeCode,
  toRegisterPage,
  login
}