若依项目学习23（前后端分离版）——前端登录整体数据流程分析（Vue2）

---

前言

今天怒学了一波Vue，现在来试试分析一波若依前端的数据流程
目录如下，这次分析的重点是框起来的部分其中（api为接口模块，所有的请求接口都在这里封装了，然后就是常见的路由和VueX和页面模块了。）详情介绍可以看若依官网
http://doc.ruoyi.vip/ruoyi-cloud/document/xmjs.html#%E5%89%8D%E7%AB%AF%E7%BB%93%E6%9E%84

1、VueX封装

首先和后端分析一样，先找登录的api

全局搜索/login找到了登录方法，点击login方法进去看看

在登录的时候，我们需要对全局变量token进行操作，于是用到了VueX在在store目录下的index.js文件里进行了模块化，对应文件在左边目录

我们存储了返回的token到全局变量里面

这里初始时会去cookie里获取token,但是在登录后我们才往cookie里面存入token值

2、axios封装

然后我们看看这个返回的request

这里引入axios,创建实例并导出（创建实例的时候怕配置了所有请求的前缀/dev-api），还拦截了所有请求与响应，类似于后端的拦截器了

请求对应的参数如下，我们这里的token为false,因此请求头就没带token。然后就是传入参数了，这里貌似还计算了时间，两次请求太快会“提示数据正在处理，请勿重复提交”

箭头下面那一大串大概是把请求的对象保存在cookie里，可以在页面找到

响应拦截器就简单处理了一下返回码啥的

3、前端页面

我们点击这个Login方法跳转找视图界面,发现在handleLogin方法调用了这个方法，这个login方法就是传参，成功后路由跳转到首页，失败后刷新验证码。