既然能刷到这篇文章，代表你应该也知道若依是用来干嘛的了，只是可能你还没那么理解，刚好最近有些时间，想重头开始重新阅读这个框架，故开创这个系列，希望能和你们一起学习，共同进步！（关注我，不迷路(❁´◡`❁)）

验证码生成的主要步骤：

验证码是在登录的时候用到，所以我们看到login.vue 根据这里给出的信息，我们可以发现验证码是和loginform里面的code绑定在一起。下方div装着的就是对应着验证码的图片啦。

可以看到图片上面还有一个单击事件，顾名思义就是获取、刷新验证码图片的。我们来看看这个方法 如图所示，在页面创建的时候，会主动调用一次该方法（因为我们进入页面的时候，验证码是要加载好的），在点击图片的时候，该函数会向引入的"@/api/login"里面去找对应的方法去发送请求。并返回一个promise对象。

这里解释一下为什么是返回request呢？我们顺藤摸瓜发现这个request是被封装过的，再进入request.js我们可以看到以下：

request 吉尔斯里面封装了axios

‘/dev-api’ 为统一前缀

由图六可见，captchaImage请求有个统一前缀dev-api，并且请求的是localhost:80，也就是请求的是前端。这其实是为了解决跨域问题，若依是在前端通过反向代理来解决的，URL请求前端，然后再映射到后端，具体配置见vue.config.js文件。

这里可以看到前缀被替换为空了，然后统一换成了localhost：8080

顺藤摸瓜根据前端给出的路径，我们找到了“/ captchaImage”方法。这个方法就是核心的验证码实现方法了，判断是否打开了验证码，使用了什么类型的验证码，并生成验证码放入redis。这里我把代码贴出来，供大家学习：

若依将后端响应给前端的数据封装成一个AjaxResult对象（继承自HashMap），篇幅问题就不贴贴了。

然后请求configService.selectCaptchaOnOff(); 方法查看验证码功能是否打开，若是没有打开，直接返回成功请求的信息，要是打开了，再去生成、保存二维码；来看看它是怎么判断验证码开关是否打开的，点进去该方法可以看到 然后再进selectConfigByKey方法

总结一下这两个方法就是，去redis里面查找"sys.account.captchaOnOff"为存储在redis中的key，该参数表面验证码开关是否打开，要是redis里面没有这个key，就去数据库里面查找出这个key，然后将它保存到redis里面。

这下我们就很清晰了。这也是整个验证码功能的后端实现。RDM查看Redis中的键值对：

接下来再来看登录实现，登录主要步骤：

和验证码类似，这里就简单展示一下前端代码 通过浏览器查看点击登录按钮后请求的URL来看后端代码……

登录成功后，我们发现它是首先请求了一个login方法，然后再请求了getinfo和getRouters方法，他们分别对应的功能为

先来看看‘/login’请求。 ctrl + 鼠标左键，进入到loginService的login方法，可以看到登录的具体流程，如下图所示： 这里判断校验码开关是否为开，是即为true，进入校验。

这里使用了spring security框架

这里用了异步去记录日志，AsyncManager为一个异步任务管理器，感兴趣可以点进去看作者是如何封装的；最后就是记录登录信息，然后生成token。到这里登录功能就完成了。剩下的就是返回该角色的一些信息之类的。

今天讲的是验证码及登录的实现，好久没写博客了不知道写得咋样，可能有些地方讲的也不是很清楚吧，如果有什么错误，还希望大家指出，一起学习嘛。也可以在评论区一起学习交流啊~

那么以上就是唐某的一些理解。这次的分享就到这里了。记得一键三连~( •̀ ω •́ )✧