springboot+vue的关于用户登录流程分析

关于用户登录相关流程

前端界面说明

如下图所示登录界面的ui

登录界面上面为账号输入文本框，下面为密码输入框，账号可以直接输入名称进行登录，密码框则为element自带的一个密码框，默认都为显示*，只有点击右边的眼睛才能看到输入什么密码，点击后的效果如下；

这是element自带的组件

如图只要在el-input组件加上show-password就可以实现该效果
登录成功弹出登录成功框并且跳转到相关界面
登录失败也会跳出失败提示框
通过在methods方法类里的相关方法添加this.message.（success和error）实现该效果，success是绿色的、error是红色的，效果如下图所示。


相关代码如下

后端界面说明

后端UserController代码中login方法使用@PostMapping注解了（“/login”）路径，使前端能够通过（“/user/login”）使用login方法，在login方法里首先有一个Result接口统一包装类来统一接口和UserDTO来接受登录请求参数，当传入的参数（userName和userPassword）有误就直接运行Result里的error方法，返回（code=400，msg=“参数错误”）给前端界面处理，如果没有误就把userDTO传给userService.login()方法里进行用户和用户密码匹对操作，如果匹配上就把返回的整个dto交给Result.success()方法进行包装给前端界面处理，对应代码如下；

在userService代码中login方法首先会先运行getUserInfo()方法在数据库里查找用户信息，如果账号或者密码错误则查询出来的User值为空则抛出一个ServiceException自定义的一种异常，并且GlobalExetption（业务异常处理类）通过@ExceptionHandler注解来监听ServiceException异常，把异常类里的code值和自定义的msg数据通过Result.error()方法来包装发送给前端，UserService相关代码如下

ServiceException自定义的异常里只设置了对象code，构造方法是传输接收参数