视频来源：若依Vue（前后端分离版）开源项目分析【完结】_哔哩哔哩_bilibili

本文参照这个视频，做了一定的笔记，欢迎交流点赞评论

目录

1.验证码的访问

浏览器的视角：

debug笔记： 

后端视角：

前端视角： 

2.登录的实现

浏览器视角：

前端视角：

后端视角：

---

1.验证码的访问

浏览器的视角：

使用了HTTP/1.1协议去交互数据

向http://localhost/dev-api/captchaImage 发送GET请求

请求体：

说明是空的

响应体：

img格式为data:image/png;base64

debug笔记： 

第一个按钮：步过，进入【下一行】代码

第二个按钮：步入，进入到具体的这个【函数里面】

第三个按钮：强制步入，【更狠】，可能还会进入到【JDK源代码】里面

第四个按钮：步出，【跳出函数】

第五个按钮：丢帧 暂且不知道

第六个按钮：运行到【光标处】

后端视角：

 存入redis

  图片处理（跳过）

 最终返回： 

前端视角： 

当vue的登录界面创建时，就向后端发送Ajax请求

页面创建，并随之获取：base64格式的验证码 + uuid + 验证码开关

其中的getCodeImg早已写好

2.登录的实现

浏览器视角：

向http://localhost/dev-api/login发送POST请求

请求体：

响应体： 

前端视角：

 

 

说明：valid验证通过之后，先让loading转圈不显示

然后由VUEX   带着this.LoginForm分发到“Login” action ，（异步ES登录）

 而其中的login函数：

都经过了请求响应拦截器

后端视角：

 

而其中loginService.login(...)函数   如何判断账号密码是否正确 并 生成代表身份的token？

使用JWT技术【后续在第二篇文章中补充】