Ruoyi Vue 登录功能后端代码调用流程10.24

目录

登录流程：

前端请求：

1.1获取验证码:

1.2用户登录

后端请求

访问首页流程

 前端请求

1.1携带Token请求首页数据

1.2接收请求验证身份

返回数据和渲染

2.1返回用户详细信息

2.2接收并渲染

退出登录流程

前端请求

1.1前端发起退出请求

1.2接收退出请求

后端处理

2.1删除Token和用户信息

2.2清除本地状态

分析泳道图：

---

登录流程：

        前端请求：

1.1获取验证码:

前端代码：

后端代码：

前端请求验证码，后端生成唯一uuid信息

生成验证码

最后将uuid 和base64位的图片转发给前端

1.2用户登录

前端代码：

.env.development

Vue.config.js

[process.env.VUE_APP_BASE_API]

这是一个 动态 key，它的值来自 .env 文件中的 VUE_APP_BASE_API

target: baseUrl

baseUrl 是你在 vue.config.js 中定义的一个变量, 后端真实地址

changeOrigin: true

修改请求头中的 Origin，让后端认为请求来自 http://localhost:8080，避免跨域问题

用户登录代码：

Store/user.js

Api/login.js

Utils/request.js

Views/login.vue

后端请求

首先对验证码进行校验, 根据传回来的uuid值 进行解析判断值是否正确

然后是对用户名密码的 前置校验 检验用户名密码是否符合规则

创建临时认证令牌,将认证令牌放入上下文

这一行触发了 Spring Security 的完整认证链

執行了以下的函數，該方法会查询数据库(userService.selectUserByUserName),检查用户状态（是否删除，停用，不存在）

validate(user)会查询角色 权限、部门等信息

认证成功以后会返回一个loginUser对象

记录日志信息、更新登录时间等等

关键点：生成token

生成该用户的token令牌  token由随机的uuid +用户名组成

最后将生成的token返回给前端。以后所有的前端请求都将携带这个token 去访问后端请求

后端请求也将通过jwt拦截请求并校验token.

访问首页流程

        前端请求

1.1携带Token请求首页数据

前端代码：

该请求通过 Axios 拦截器自动在请求头中附加 Token

1.2接收请求验证身份

后端代码：

com/ruoyi/framework/security/filter/JwtAuthenticationTokenFilter.java

此处从请求头中提取 Token，并进行校验。

返回数据和渲染

2.1返回用户详细信息

后端代码：

com/ruoyi/web/controller/system/SysLoginController.java

2.2接收并渲染

前端代码：

退出登录流程

        前端请求

1.1前端发起退出请求

前端代码：

1.2接收退出请求

后端代码：

拦截/logout请求

后端处理

2.1删除Token和用户信息

后端代码

com/ruoyi/framework/security/handle/LogoutSuccessHandlerImpl.java

2.2清除本地状态

前端代码

分析泳道图：