ruoyi-vue-pro账号密码登陆流程

439 阅读2分钟

image.png

首页来到前端页面login.vue

image.png

点击登录按钮去到getCode方法

①关于@click.native.prevent的解释。prevent只触发点击事件不触发其他的事件。native给整个组件都绑定点击事件,不加只能给基本的元素绑定。 @click.prevent.native作用_@click是什么意思_尔公的博客-CSDN博客 image.png

情况二会调用图片验证码,否则直接调用handleLogin方法

image.png

需要Verify这个组件 github:GitHub - xingyuv/captcha-plus: 行为验证码(滑动拼图、点选文字),前后端(java)交互,包含vue/h5/Android/IOS/flutter/uni-app/react/php/go/微信小程序的源码和实现

image.png

image.png image.png

在连续多次点击验证码的时候后端出现一个空指针异常,定位到如下方法

image.png

复现方式,只要不移动滑块的情况下点击滑块或者拼图就会报空指针异常。初步推断应该是CaptchaVO这个对象需要获取滑动的值,如果我没滑动可能获取的这个值就是个null。

image.png

回过头来,最终不管启动验证码还是不启动验证码的情况下都会调用handleLogin

前半部分根据自己是否点击记住我设置用户名,密码等的缓存 后半部分就是调用后端来校验用户名和密码了

image.png

调用链路如下: 调用store文件夹下的user.js的SmsLogin或者Login方法根据loginType来决定,这里用户名和密码登录就调用Login方法

image.png

最后调用api下的login.js的login方法向后端发出请求

image.png

image.png

现在我们来到后端

AuthController

image.png

authService的实现类AdminAuthServiceImpl

image.png

查看authenticate方法,主要对用户名和密码进行了校验。这里抛出异常的方式我们研究一下。

image.png

exception()是ServiceExceptionUtil的静态方法,最终返回一个自定义的异常ServiceException

关于@EqualsAndHashCode(callSupser = true)这个注解是子类在重写hashCode和equals方法的时候会把父类的属性一并考虑到。

关于hashCode()和equals()

参考: 理解Java中equals()和hashcode()的关系 - 知乎 (zhihu.com)

image.png

最后创建令牌和响应信息

这里涉及到如何生成一个accessToken,以及mapStruct的使用。

image.png

接口中竟然可以写一个包含方法体的方法?

image.png image.png

创建令牌

image.png

image.png