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

本文介绍了RuoYi-Vue-Plus项目的升级,重点涵盖了前端加密处理、后端解密机制、使用Sa-Token、Mybatis-Plus等技术集成,以及安全校验,包括客户端授权和token验证的拦截器设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 项目网站:RuoYi-Vue-Plus: 后台管理系统 重写RuoYi-Vue所有功能 集成 Sa-Token、Mybatis-Plus、Jackson、SpringDoc、Hutool、OSS 定期同步 - Gitee.com

一、前端部分

这里两个文件对应两种环境。

这里我们可以看到对encrypt-key这个密匙是进行了两次加密,一次Base64一次RSA加密后续后端也会解密两次。

二、后端部分

请求经过crypto过滤器检测到存在加密标头,然后转到解密类中解密


先获取header中的密匙解密两次后解密请求体中的参数

 

 这里的配置对应拦截器中的参数

进入controller层首先校验授权类型是否存在于客户端授权类型有:

一个客户端可以有多种授权类型,只要满足其中一个即可。
进入login方法

根据传入的授权类型获取容器中对应的bean对象来区分调用哪一个实现类中的login方法。

我们看到这个类中有多个实现类对应着每个授权类型。这里我们是密码登录所以进入PasswordAuthStrategy。

成功返回即登录成功。

三、安全校验

值得一提的是将clientId传入token中后续的校验,看下图:

这个拦截器会拦截除登录相关接口的所以请求,处理检查是否有token外,还会校验请求请求header中的客户端id、参数中的客户端id、token中客户端的id只需要其中两个一致即可通过拦截器否则会被拦截

### RuoYi-Vue Plus 对接 RuoYi-APP 方法 #### 集成概述 为了实现 `RuoYi-Vue Plus` 与 `RuoYi-APP` 的无缝对接,需确保前后端分离架构下的接口调用顺畅。此过程涉及配置文件调整、API 路由设置以及状态管理工具 Pinia 或 Vuex 的适配。 #### 后端准备 在 `RuoYi-APP` 中,确保已开启 CORS 支持并正确配置 API 接口路径。通常情况下,这一步骤已经在默认配置中完成,但仍建议开发者检查服务器响应头中的 Access-Control-Allow-Origin 字段是否允许跨域请求[^4]。 #### 前端配置 对于基于 Vue3 构建的应用程序而言,在创建应用实例时引入必要的插件和服务是非常重要的。具体来说: ```javascript import { createApp } from 'vue' import App from './App.vue' import router from '@/router/index.js'; import pinia from '@/store/index.js'; const app = createApp(App); // 使用路由和状态管理库 app.use(router).use(pinia); // 挂载至 DOM 容器 app.mount('#app'); ``` 上述代码片段展示了如何初始化一个 Vue 应用,并注册全局使用的路由器组件和状态管理模式[^2]。 #### API 请求封装 考虑到安全性因素,推荐采用 Axios 这样的 HTTP 客户端来处理所有的网络通信需求。通过自定义拦截器可以轻松地向每次请求附加身份验证令牌或其他必要参数: ```javascript import axios from 'axios' // 创建一个新的 Axios 实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置基础 URL 地址 timeout: 5000 // 设定超时时长 }) service.interceptors.request.use( config => { const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = `Bearer ${token}` } return config; }, error => Promise.reject(error) ) export default service; ``` 这段脚本实现了对所有发出请求的预处理逻辑,包括但不限于添加认证信息到头部字段中去[^1]。 #### 数据同步机制 当涉及到复杂的业务场景时,可能还需要考虑客户端与服务端之间的双向数据绑定问题。此时可以通过 WebSocket 技术建立持久连接,从而实现实时消息推送功能;或者利用 GraphQL 查询语言简化多条件筛选查询语句的设计难度[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值