RuoYi前后端分离框架集成手机短信验证码（二）之前端篇

一、背景

本文是RuoYi前后端分离框架集成手机短信验证码（一）之后端篇文章配套的，主要介绍前端的修改点，两篇文章结合可以完整的完成RuoYi前后端分离框架对手机短信验证码的集成，前端集成主要就两部分，一部分是js的修改，一部分是界面的修改，话不多说直接开整。

二、前端登录集成

• 1.修改src/api/login.js，提供sms方法，代码如下

  import request from '@/utils/request'
  
  // 登录方法
  export function login(username, password, code, uuid) {
    const data = {
      username,
      password,
      code,
      uuid
    }
    return request({
      url: '/login',
      headers: {
        isToken: false,
        repeatSubmit: false
      },
      method: 'post',
      data: data
    })
  }
  
  // 注册方法
  export function register(data) {
    return request({
      url: '/register',
      headers: {
        isToken: false
      },
      method: 'post',
      data: data
    })
  }
  
  // 获取用户详细信息
  export function getInfo() {
    return request({
      url: '/getInfo',
      method: 'get'
    })
  }
  
  // 退出方法
  export function logout() {
    return request({
      url: '/logout',
      method: 'post'
    })
  }
  
  // 获取验证码
  export function getCodeImg() {
    return request({
      url: '/captchaImage',
      headers: {
        isToken: false
      },
      method: 'get',
      timeout: 20000
    })
  }
  
  // 验证码登录方法
  export function loginBySms(phonenumber, code) {
    const data = {
      phonenumber,
      code
    }
    return request({
      url: '/sms/login',
      headers: {
        isToken: false,
        repeatSubmit: false
      },
      method: 'post',
      data: data
    })
  }
  
  // 发送手机验证码方法
  export function sendBySms(phonenumber) {
    return request({
      url: '/sms/send',
      headers: {
        isToken: false,
      },
      method: 'post',
      data: phonenumber
    })
  }
  

• 2.修改src/store/modules/user.js，提供LoginByPhone，代码如下

  import { getInfo, login, loginBySms, logout } from '@/api/login'
  import { getToken, removeToken, setToken } from '@/utils/auth'
  import { isEmpty, isHttp } from '@/utils/validate'
  import defAva from '@/assets/images/profile.jpg'
  import {sm4Decrypt} from '@/utils/sm4.js'
  
  
  const user = {
    state: {
      token: getToken(),
      id: '',
      name: '',
      nickName: '',
      avatar: '',
      roles: [],
      permissions: []
    },
  
    mutations: {
      SET_TOKEN: (state, token) => {
        state.token = token
      },
      SET_ID: (state, id) => {
        state.id = id
      },
      SET_NAME: (state, name) => {
        state.name = name
      },
      SET_NICK_NAME: (state, nickName) => {
        state.nickName = nickName
      },
      SET_AVATAR: (state, avatar) => {
        state.avatar = avatar
      },
      SET_ROLES: (state, roles) => {
        state.roles = roles
      },
      SET_PERMISSIONS: (state, permissions) => {
        state.permissions = permissions
      }
    },
  
    actions: {
      // 手机验证码登录
      LoginByPhone({ commit }, userInfo) {
        const phonenumber = userInfo.phonenumber.trim()
        const code = userInfo.code
        return new Promise((resolve, reject) => {
          loginBySms(phonenumber, code).then(res => {
            setToken(res.token)
            // this.token = res.token
            commit('SET_TOKEN', res.token)
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
  
      // 登录
      Login({ commit }, userInfo) {
        const username = userInfo.username.trim()
        const password = userInfo.password
        const code = userInfo.code
        const uuid = userInfo.uuid
        return new Promise((resolve, reject) => {
          login(username, password, code, uuid).then(res => {
            setToken(res.token)
            commit('SET_TOKEN', res.token)
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
  
      // 获取用户信息
      GetInfo({ commit, state }) {
        return new Promise((resolve, reject) => {
          getInfo().then(res => {
            res.user.phonenumber = sm4Decrypt(res.user.phonenumber)
            const user = res.user
            let avatar = user.avatar || ''
            if (!isHttp(avatar)) {
              avatar = (isEmpty(avatar)) ? defAva : process.env.VUE_APP_BASE_API + avatar
            }
            if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
              commit('SET_ROLES', res.roles)
              commit('SET_PERMISSIONS', res.permissions)
            } else {
              commit('SET_ROLES', ['ROLE_DEFAULT'])
            }
            commit('SET_ID', user.userId)
            commit('SET_NAME', user.userName)
            commit('SET_NICK_NAME', user.nickName)
            commit('SET_AVATAR', avatar)
            resolve(res)
          }).catch(error => {
            reject(error)
          })
        })
      },
  
      // 退出系统
      LogOut({ commit, state }) {
        return new Promise((resolve, reject) => {
          logout(state.token).then(() => {
            commit('SET_TOKEN', '')
            commit('SET_ROLES', [])
            commit('SET_PERMISSIONS', [])
            removeToken()
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
  
      // 前端 登出
      FedLogOut({ commit }) {
        return new Promise(resolve => {
          commit('SET_TOKEN', '')
          removeToken()
          resolve()
        })
      }
    }
  }
  
  export default user
  

• 3.修改src/views/login.vue，提供短信验证码登录选项，代码如下

  <template>
    <div class="login">
  
      <el-tabs v-model="loginMode" class="loginModetabs">
        <el-tab-pane label="密码登录" name="userAndPassWord">
          <el-form ref="accountLoginRef" :model="loginForm" :rules="loginRules" class="login-form">
            <h3 class="title">{
      { title }}</h3>
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                t