RuoYi-Vue-Plus（登录流程-验证码生成）

最新推荐文章于 2025-10-14 09:37:09 发布

syfjava

最新推荐文章于 2025-10-14 09:37:09 发布

阅读量703

点赞数

CC 4.0 BY-SA版权

分类专栏： RuoYi-Vue-Plus 学习文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/javaxueba/article/details/137015592

RuoYi-Vue-Plus 学习专栏收录该内容

37 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

该博客详细介绍了RuoYi-Vue-Plus项目的登录流程，特别是验证码的生成和使用。首先，登录过程中调用CaptchaController生成base64图片和UUID。接着，前端在login页面配置验证码功能，利用getCode方法获取验证码。后台接口判断验证码启用状态，并基于UUID生成并存储验证码。此外，还提到了手机和短信验证的实现方式，所有验证码的校验均通过UUID在缓存中进行。

一、登录流程

1- 进入登录页面，调用 com.ruoyi.web.controller.common.CaptchaController 类中的

captchaImage 方法，生成base64的图片以及 UUID

2- 提交登录信息 + 验证码 + uuid 比对

错误：返回错误信息，删除缓存的验证码

成功：拿到token，加入缓存

二、验证码生成

1-前台代码配置

前端login 页面中，图片如下：

 <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>

methods 函数中，captcha

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

syfjava

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

RuoYi-Vue-Plus（登录流程）

javaxueba的博客

03-27

1204

登录按钮：先validate方法校验表单再通过this.loginForm.rememberMe 判断是否记住密码其中 this.$router.push({ path: this.redirect || "/" }).catch(()=>{});定义在 watch中。

04 RuoYi-Vue后台管理系统-验证码与登录流程

低码开发

12-23

1286

修改前端favicon.ico文件：自定义标题修改：选择对应开发环境配置进行修改：测试效果：修改登录页面标题：修改底部版权说明：修改背景图片：修改成功： 验证码逻辑：前端相关代码：后端相关代码： redis存储情况：登录流程前端代码：后端将token返回后，前端将此token(访问令牌)保存到cookie中。下次访问其他地址的时候，就带着这个c...

参与评论您还未登录，请先登录后发表或查看评论

Ruoyi-Vue-Plus框架使用教程

m0_52110974的博客

08-05

2705

若依plus框架

基于ruoyi-vue-plus 5.x分支抖音小程序高效登录认证策略

最新发布

weixin_46223979的博客

10-14

117

该代码实现了一个抖音小程序认证策略（DyXcxAuthStrategy），主要功能包括：1. 通过抖音接口获取用户openid；2. 处理用户登录/注册逻辑，新用户自动分配默认昵称和头像；3. 实现积分奖励机制，包括注册奖励和邀请奖励；4. 记录积分变动明细和分享关系。认证成功后返回包含accessToken的登录信息，支持自定义token过期时间配置。该策略采用Spring框架实现，整合了Sa-Token认证、Hutool工具库等组件，实现了完整的OAuth2小程序登录流程。

若依ruoyi ruoyi-vue ruoyi-cloud 微服务全网最全视频教程网盘资源

12-25

若依ruoyi ，ruoyi-vue， ruoyi-cloud，微服务全网最全视频教程网盘资源若依框架系列视频教程(RuoVi-Vue前后端分高版本) 01 项目概述,mp4 02 项目运行,mp4 03 构建发布到 RuoYi-Cloud 微服务版本视频课程目录 ├──01 项目概述.mp4 20.77M ├──02 微架构概念.mp4 20.99M ├──03 微架构及选型.mp4 21.19M ├──04 目录文件介绍.mp4 17.16M ├──05 项目运行.mp4 108.31M ├──06 构建发布到Linux.mp4 70.13M ├──07 开发环境运行.mp4 82.35M ├──08 服务网关介绍.mp4 23.32M ├──09 使用服务网关.mp4 35.82M

ruoyi-vue-plus登录流程（sa-token）

递归不回头的博客

05-27

1913

本文分析了基于Ruoyi-Vue-Plus 5.x和Sa-Token框架的登录认证流程。系统支持接口传输加密（RSA+Base64），可通过配置调整为明文调试。

Ruoyi-vue-plus5.0登录流程详解

feng_ling_01的博客

03-02

3443

这里我们可以看到对encrypt-key这个密匙是进行了两次加密，一次Base64一次RSA加密后续后端也会解密两次。我们看到这个类中有多个实现类对应着每个授权类型。根据传入的授权类型获取容器中对应的bean对象来区分调用哪一个实现类中的login方法。这个拦截器会拦截除登录相关接口的所以请求，处理检查是否有token外，还会校验请求。先获取header中的密匙解密两次后解密请求体中的参数。一个客户端可以有多种授权类型，只要满足其中一个即可。这里的配置对应拦截器中的参数。这里两个文件对应两种环境。

Ruoyi-vue-plus-5.x第一篇Sa-Token权限认证体系深度解析：1.2 登录认证机制详解

08-29

557

本文详细解析了Sa-Token的登录认证机制，重点介绍了其登录流程、Token生成与校验以及会话管理功能。通过RuoYi-Vue-Plus框架的实际代码示例，展示了用户登录验证、Token生成配置、会话管理实现等核心环节。内容涵盖从用户提交信息到Token返回的完整流程，包括密码校验、会话存储、Token有效期设置等关键技术点，为开发者提供了完整的认证机制实现参考。

RuoYi-Vue源码阅读(一）：验证码模块

08-06

1975

本文主要介绍了RuoYi-Vue项目是如何实现验证码模块的，分成前端代码和后端代码两部分源码解读，通过本文，你可以详细地了解验证码模块的实现过程。

若依（Ruoyi-Vue-Plus版）——1.登录(SaToken)

热门推荐

hwp_ing的博客

11-25

2万+

整个界面和原版差不多,前端也进行了路径重写。配置可以加个前缀，方便查看代码生成基本与原本一样使用.sprngdoc和apifox的的原因。

【亲测免费】 RuoYi-Vue-Plus 教程

gitblog_01027的博客

08-09

3466

--- ## 1. 项目介绍 **RuoYi-Vue-Plus** 是基于 Vue3 和 SpringBoot 的一款现代化后台管理系统，它对[原始的 RuoYi-Vue](https://github.com/yangzongzheng/myblog/tree/master/ruoyi-vue)进行了全面重构，专为分布式集群和多租户场景设计。项目不仅代码和文档开放且免费，还提供了高度的可定制...

使用RuoYi-Vue-Plus_作为博客的后端框架__项目代码、文档_均开源免费遵循

09-09

使用RuoYi-Vue-Plus_作为博客的后端框架__项目代码、文档_均开源免费遵循开源协议在项目_ruoyi-vue-plus-

【RuoYi-Vue-Plus】登陆逻辑的实现

H_Q_Li的博客

11-03

4263

【RuoYi-Vue-Plus】登陆逻辑的实现

若依框架RuoYi-Vue-Plus（项目搭建及使用教程）

人数苦短，我学Java

06-28

5700

基于SpringBoot和Bootstrap的JavaEE企业级开发平台，一款优秀开源的后台管理系统。

RuoYi-Vue-Plus（基础知识点jackson、mybatisplus、redis以及Redisson 工具类）

javaxueba的博客

03-19

7500

时区#日期格式#默认转json的属性，这里设置为非空才转json#设置属性命名策略,对应jackson下PropertyNamingStrategy中的常量值，SNAKE_CASE-返回的json驼峰式转下划线，json body下划线传到后端自动转驼峰式#对象为空时是否报错，默认true#返回的java.util.date转换成timestamp#json中含pojo不存在属性时是否失败报错,默认true#是否允许出现单引号,默认false。

RuoYi-Vue源码阅读(二）:登陆模块

08-07

1655

本文主要介绍了RuoYi-Vue项目登录模块的代码实现，分成前端代码和后端代码两个部分来进行源码解读，通过本文可以对RuoYi-Vue项目的登录模块深入了解。

RuoYi-Vue-Plus认证策略：多种登录方式

gitblog_00695的博客

08-29

1033

在现代企业级应用开发中，灵活多样的用户认证方式是提升用户体验和安全性的关键。RuoYi-Vue-Plus作为一款功能强大的后台管理系统，通过策略模式（Strategy Pattern）实现了高度可扩展的认证体系，支持密码登录、短信验证码登录、邮箱验证码登录、第三方社交登录以及小程序登录等多种认证方式。本文将深入解析RuoYi-Vue-Plus的认证策略架构，详细介绍每种登录方式的实现原理和使用...

RuoYi-Vue教程

weixin_45072119的博客

06-21

4225

若依框架因其强大的功能和灵活性，吸引了众多第三方开发者基于其核心架构进行扩展和优化，从而形成了丰富的生态系统。

扫码登录功能实现,基于ruoyi-vue分离版举例集成

ew45218的博客

04-28

865

***//*** 重写 authenticate方法，实现身份验证逻辑。*/@Override// 委托 UserDetailsService 查找系统用户// 鉴权成功，返回一个拥有鉴权的 AbstractAuthenticationToken/*** 重写supports方法，指定此 AuthenticationProvider 仅支持短信验证码身份验证。*/@Override/*** 自定义扫码登录token验证*//**

如何使用ApiFox接入ruoyi-vue-plus

03-26

### 如何通过 Apifox 对接 RuoYi-Vue-Plus 项目 #### 关闭 API 接口加密为了使 Apifox 能够顺利对接 RuoYi-Vue-Plus 的后端接口，需先关闭框架中的 API 加密功能。这一步骤通常涉及修改 `ruoyi-common` 或者 `ruoyi-system` 模块下的配置文件或代码逻辑[^1]。 #### 禁用验证码登录由于验证码的存在会干扰自动化测试工具（如 Apifox）的正常运行，在开发环境中可以临时禁用验证码验证机制。具体操作可能需要调整 `LoginController` 中的相关校验逻辑或者直接注释掉验证码校验部分的代码。 #### 前端 Vue 代码全局替换针对前端部分，建议对整个项目的源码进行一次全面搜索并替换所有涉及到动态路径拼接的地方，确保请求地址能够被正确解析到本地服务上。例如，如果原生应用指向的是生产环境服务器，则应将其更改为 localhost 或其他指定 IP 地址。 ```javascript // 替换前 axios.defaults.baseURL = 'https://example.com/api'; // 替换后 axios.defaults.baseURL = '/mock'; ``` #### 设置全局参数与环境变量定义一些必要的全局常量以及加载对应的 .env 文件来支持多套不同的部署方案是非常重要的。可以通过创建多个 `.env.development`, `.env.production` 等文件分别存储不同模式下的基础 URL 和 token 密钥等内容。 #### 创建公共脚本在 Apifox 当中新建一个名为「Auto Login」之类的集合用于存放所有的自动生成流程相关接口调用计划书，并且编写一段 JavaScript 函数完成模拟用户身份认证过程的工作流设计。 ```javascript pm.sendRequest({ url: pm.environment.get('BASE_URL') + "/auth/login", method: "POST", header: { "Content-Type": "application/json" }, body: JSON.stringify({ username:"admin", password:"password"}) }, function (err, res){ let jsonResponse = res.json(); pm.globals.set("token", jsonResponse.token); }); ``` #### 配置 Apifox 根目录最后也是最关键的一环就是确认好当前工作区的实际物理位置是否已经映射到了目标系统的根节点之下。只有这样才能保证后续执行过程中不会因为找不到资源而导致失败的情况发生。 --- ### 效果展示当以上准备工作全部完成后，理论上就可以利用 Apifox 实现无人值守式的持续集成/交付流水线构建了。每次提交新版本之前都会自动触发一系列预设好的单元测试案例集并对结果加以分析评估从而决定下一步动作方向。 ---