首先加载登录界面会发送验证码请求和获取Cookie

会调用created函数

Getcode是获取验证码

GetCookie是获取cookie

若依微服务上传 若依登录流程_验证码

若依微服务上传 若依登录流程_若依微服务上传_02

GetCodeImg函数会调用ajax发送请求给后端

若依微服务上传 若依登录流程_验证码_03

若依微服务上传 若依登录流程_ajax_04

后端GetMapping接口接收到请求后执行getCode方法

若依微服务上传 若依登录流程_ajax_05

Getcode方法中会随机生成uuid(用户的唯一标识)

若依微服务上传 若依登录流程_验证码_06

然后生成验证码图片和答案

CapText会生成一个例如6-2=?@4的字符串

Codestr中保存6-2=?

Code中保存4也就是验证码的答案

Image就是验证码图片了

若依微服务上传 若依登录流程_若依微服务上传_07

然后将用户的uuid、生成的验证码答案、以及验证码有效时间的信息传入redis内存数据库中

若依微服务上传 若依登录流程_ajax_08

最后getcode函数把生成的uuid和经过转换后的验证码图片装入ajax中返回给前端

若依微服务上传 若依登录流程_javascript_09

然后执行then后面的函数,变量res中就存储着返回的ajax信息,

然后赋值给页面变量codeurl、loginform.uuid

若依微服务上传 若依登录流程_javascript_10

到此登录界面验证码和用户唯一标识生成完毕

当我们输入完用户名和密码点击登录按钮时,会触发handleLogin函数

若依微服务上传 若依登录流程_前端_11

handleLogin中会调用user.js中的Login函数并把loginform(用户名、密码、uuid、用户输入的验证码答案)传入函数中

若依微服务上传 若依登录流程_若依微服务上传_12

Login函数把loginform中的数据取出后

若依微服务上传 若依登录流程_验证码_13

又传入login.js的login函数中使用ajax传入后端接口

若依微服务上传 若依登录流程_验证码_14

后端接口执行login方法将传入的用户数据用作生成token的依据

若依微服务上传 若依登录流程_ajax_15

进入token生成方法中首先执行验证码对错判断

若依微服务上传 若依登录流程_若依微服务上传_16

验证码判断函数首先根据用户的唯一标识(uuid),在redis数据库中找出对应的验证码答案赋值给captcha

若依微服务上传 若依登录流程_若依微服务上传_17

再与用户输入的验证码(code)对比,如果出错就直接抛出异常

若依微服务上传 若依登录流程_javascript_18

再执行用户信息验证

若依微服务上传 若依登录流程_前端_19

                  

该方法回去调用UserDetailsServiceImpl.loadUserByUsername,方法最终会调用createLoginUser方法

若依微服务上传 若依登录流程_前端_20

createLoginUser方法会根据user信息去调用getMenuPermission方法

若依微服务上传 若依登录流程_前端_21

getMenuPermission方法根据传递的用户信息,获取用户的菜单数据权限并返回

若依微服务上传 若依登录流程_前端_22

回到createLoginUser方法,使用用户信息和权限生成一个LoginUser类

若依微服务上传 若依登录流程_前端_23

若依微服务上传 若依登录流程_前端_24

菜单权限查询成功后,输出和更新此用户的登录ip和时间等各种信息

若依微服务上传 若依登录流程_若依微服务上传_25

若依微服务上传 若依登录流程_javascript_26

最后使用之前生成的loginUser类(包含用户信息和权限)生成token

若依微服务上传 若依登录流程_ajax_27

最后回到login函数通过ajax返回token

若依微服务上传 若依登录流程_前端_28

然后执行then后面的函数设置用户的token

若依微服务上传 若依登录流程_javascript_29

最后回到点击按钮的事件,如果前面的函数都没有异常就会跳转到后台首页

若依微服务上传 若依登录流程_javascript_30

进入首页之前,前端设置的路由守卫会判断Vuex中是否存在用户的key(用户的标识)

如果不存在会去请求/getinfo接口,

若依微服务上传 若依登录流程_验证码_31

若依微服务上传 若依登录流程_javascript_32

若依微服务上传 若依登录流程_若依微服务上传_33

把用户和权限的集合用ajax返回给前端

若依微服务上传 若依登录流程_javascript_34

若依微服务上传 若依登录流程_若依微服务上传_35

将后端返回的数据通过函数赋值给VUEX中的变量

若依微服务上传 若依登录流程_若依微服务上传_36