若依框架（前后端分离）增加手机号验证码登录

这篇文章主要介绍了如何在若依架（前后端分离）版本中集成短信验证码登录功能。文章内容包括了前后端的详细实现步骤，并通过代码示例展示了如何生成验证码、验证验证码、验证码登录、自定义的认证处理等功能的实现。

前端部分：

• 登录界面改造：在现有的登录界面上增加短信验证码登录选项。用户可以选择使用短信验证码进行登录，前端表单将收集用户的手机号码和验证码信息。
• 与后端接口的交互：实现前端与后端的交互逻辑，包括请求生成验证码、发送验证码到用户手机、提交验证码进行验证。前端通过调用后端API来完成这些操作，并根据后端的响应结果处理登录流程和用户反馈，确保用户体验的流畅性与安全性。

一、增加短信登录和发送短信验证码方法

        在src/api/login.js新增短信登录、发送短信验证码

// 短信登录方法
export function smsLogin(mobile,smsCode,uuid) {
  const data = {
    mobile,
    smsCode,
    uuid
  }
  return request({
    url: '/sms/login',
    method: 'post',
    data: data
  })
}

// 发送短信验证码
export function getSmsCode(mobile) {

  const data = {
    mobile
  }

  return request({
    url: '/sms/code',
    method: 'post',
    data:data
  })
}

二、增加短信登录方法 

        在src/store/modules/user.js新增短信登录方法

    // 短信登录
    SmsLogin({ commit }, userInfo) {
      const mobile = userInfo.mobile.trim()
      const smsCode = userInfo.smsCode
      const uuid = userInfo.uuid
      return new Promise((resolve, reject) => {
        smsLogin( mobile, smsCode, uuid).then(res => {
          setToken(res.token)
          commit('SET_TOKEN', res.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }

注意有没有引入对应类！！！

注意有没有引入对应类！！！

注意有没有引入对应类！！！

import { login, logout, getInfo, smsLogin } from '@/api/login'

三、增加发送短信验证码和短信登录逻辑 

        在src/views/login.vue修改登录页面，增加发送短信验证码和短信登录代码

<template>
    <div class="login">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title">若依后台管理系统</h3>
        <el-form-item prop="username" v-if="!isSmsLogin">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password" v-if="!isSmsLogin">
          <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="code" v-if="!isSmsLogin">
          <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          </div>
        </el-form-item>
  
  
        <el-form-item prop="mobile" v-if="isSmsLogin">
          <el-input v-model="loginForm.mobile" type="text" auto-complete="off" placeholder="手机号">
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="smsCode" v-if="isSmsLogin">
          <el-input v-model="loginForm.smsCode" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
          </el-input>
          <div class="login-code">
            <el-button round @click.native.prevent="getSmsCode">{
  {computeTime>0 ? `(${computeTime}s)已发送` : '获取验证码'}}</el-button>
          </div>
        </el-form-item>
  
        <el-row>
          <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
          <div class="sms-login">
            <el-button
              size="mini"
              type="text"
              @click.native.prevent="loginMethod"
            >
              <span v-if="isSmsLogin">账号密码登录</span>
              <span v-else>短信验证登录</span>
            </el-button>
          </div>
        </el-row>
        <el-form-item style="width:100%;">
          <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
          <div style="float: right;" v-if="register">
            <router-link class="link-type" :to="'/register'">立即注册</router-link>
          </div>
        </el-form-item>
      </el-form>
      <!--  底部  -->
      <div class="el-login-footer">
        <span>Copyright © 2018-2020 ruoyi.vip All Rights Reserved.</span>
      </div>
    </div>
  </template>
  
  <script>
  import {getCodeImg, getSmsCode,smsLogin} from "@/api/login";
  import { authBinding } from "@/api/system/auth";
  import Cookies from "js-cookie";
  import { encrypt, decrypt } from '@/utils/jsencrypt'
  
  export default {
    name: "Login",
    data() {
      return {
        codeUrl: "",
        cookiePassword: "",
        computeTime: 0,
        loginForm: {
          username: "",
          password: "",
          rememberMe: false,
          code: "",
          uuid: "",
          mobile: "",
          smsCode: ""
  
        },
        loginRules: {
          username: [
            { required: true, trigger: "blur", message: "请输入您的账号" }
          ],
          password: [
            { required: true, trigger: "blur", message: "请输入您的密码" }
          ],
          mobile: [
            { required: true, trigger: "blur", message: "手机号不能为空" }
          ],
          code: [{ required: true, trigger: "change", message: "请输入验证码" }
          ],
        },
  
        loading: false,
        // 验证码开关
        captchaEnabled: true,
        // 注册开关
        register: false,
        isSmsLogin: false,
        redirect: undefined
      };
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {
      this.getCode();
      this.getCookie();
    },
    methods: {
      loginMethod(){
        this.isSmsLogin = !this.isSmsLogin;
      },
      getSmsCode(){
        if (!this.computeTime) {
          this.$refs.loginForm.validate(valid => {
            if (valid) {
              getSmsCode(this.loginForm.mobile).then(res =>{
                if(re