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

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

前端部分：

• 登录界面改造：在现有的登录界面上增加短信验证码登录选项。用户可以选择使用短信验证码进行登录，前端表单将收集用户的手机号码和验证码信息。
• 与后端接口的交互：实现前端与后端的交互逻辑，包括请求生成验证码、发送验证码到用户手机、提交验证码进行验证。前端通过调用后端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.smsCodeconst uuid = userInfo.uuidreturn 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-buttonsize="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