renren_fast项目解读——登录验证流程

• 如有错误希望各位大佬进行批评指正。

01 | 登录验证流程图

02 | 登录流程/步骤

1. 打开登录页面, 对应代码：/src/views/common/login.vue
   

2. vue的钩子函数created()：初始化时进行uuid的创建，相应代码：/src/views/common/login.vue，/src/views/utils/index.js
   
   

3. 右键，审查元素，点击元素左侧的鼠标图标后，点击验证码，发现图片验证码的src里有uuid。
   

4. 带上uuid发送到后端
   

5. 后端进行uuid的接收： io.renren.modules.sys.controller. captcha
   

6. 在55行代码处进入， 进行图片验证码的生成： io.renren.modules.sys.service.impl.SysCaptchaServiceImpl#getCaptcha
   生成后将图片返回到前端页面
   注意，这里的Producer是google的验证码生成器，用spring注入进来的，可使用其直接生成图片。
   

7. 代码49行开始对uuid与验证码进行存入数据库，存储完成后返回到上一步骤，进行图片的继续生成。

   

8. 点击登录，在 /src/views/common/login.vue页面中触发函数进行数据提交，将账号密码与验证码提交到 /sys/login 目录下。
   
   

9. io.renren.modules.sys.controller.SysLoginController#login进行数据的接收
   代码67行先对验证码进行验证，如果验证码错误则抛出异常
   代码73行开始对用户信息进行验证
   

10. 进入67行，查看验证码验证步骤：io.renren.modules.sys.service.impl.SysCaptchaServiceImpl#validate
    1. 首先根据uuid获取到code、expireTime信息，将其暂存入SysCapthaEntity对象，
    2. 然后对uuid在数据库中的记录进行删除（要是不删除的话，那相对应的表的数据就太多了），
    3. 然后对刚刚存入SysCapthaEntity对象里的验证码与过期时间进行判断是否符合要求，
    4. 符合要求返回true，否则返回false。
    

11. 验证码验证完毕，SysLoginController#login的代码继续往下，进入代码73行，代码最终来到io.renren.modules.sys.service.impl.SysUserServiceImpl#queryByUserName，进行用户信息的查询。
    这里之所以用到了baseMapper，而前文又没有baseMapper的注入，是因为用到了反射。
    而真正与数据库进行交互的sql语句在\src\main\resources\mapper\sys\SysUserDao.xml
    
    

12. 用户信息验证完毕，接下来应该为用户生成一个 token， 相应代码：io.renren.modules.sys.service.impl.SysUserTokenServiceImpl#createToken
    第二张图就是生成token的流程，我们再进入generateValue查看具体生成过程。
    io.renren.modules.sys.oauth2.TokenGenerator 下有token无参与有参构造方法，这里用的是无参方式。
    第三张图可以看出，无参token构造就是生成一个uuid。

    
    

    

13. token生成完毕，io.renren.modules.sys.controller.SysLoginController#login 第86行显示，将刚刚生成的token与相关信息封装到R实体类中，将其存入数据库，并将r返回，供前端进行存取。
    

14. 我们回到vscode中的前端页面 : \src\views\common\login.vue
    代码显示，如果后端代码成功运行，则将生成的token放到cookie中，并跳转到home 页面。
    

15. 我们登录人人页面，可以查看到在请求头中有cookie选项，cookie中存放着token。

    

完成。