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.codereturn new Promise((resolve, reject) => {loginBySms(phonenumber, code).then(res => {setToken(res.token)// this.token = res.tokencommit('SET_TOKEN', res.token)resolve()}).catch(error => {reject(error)})})},// 登录Login({ commit }, userInfo) {const username = userInfo.username.trim()const password = userInfo.passwordconst code = userInfo.codeconst uuid = userInfo.uuidreturn 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.userlet 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-inputv-model="loginForm.username"t