ruoyi登录实现

目录

一：前端

1.登录的vue代码

2.点击登录按钮后执行的函数

3.api中的登录方法

4.从后端返回

二：后端

1./login进入的后端代码

2.登录验证

1.校验验证码

2.用户验证

3.生成token

3.返回前端

---

一：前端

1.登录的vue代码

2.点击登录按钮后执行的函数

handlelogin（）

this.loading = true;//将按钮显示登录中

记住用户将数据写入cookies，否则不写入

使用store中的actions里的login动作并传入参数

参数

登录动作：

封装Promise对象并调用login方法

3.api中的登录方法

post请求返回数据。通过反向代理映射到8080的/login进入后端代码

4.从后端返回

执行函数保存token

保存token

二：后端

1./login进入的后端代码

生成token并返回

2.登录验证

1.校验验证码

如果验证码开着就去校验验证码

如果验证码为null或与实际验证码不匹配，则记录登录失败信息并抛出相应的异常，以通知用户和系统登录验证失败的原因。

2.用户验证

代码用于进行用户身份验证，处理登录成功和失败的情况，并记录相应的登录信息。如果用户名和密码验证失败，它会抛出异常以通知系统登录失败的原因。如果验证成功，它会记录登录成功的信息并执行其他相关操作。

3.生成token

如果验证都成功就生成token并返回

3.返回前端

储存并返回前端

参考：4、登录的实现_哔哩哔哩_bilibili