<三>vue-element-template 对接登陆接口

一、vue-element-template  初始化接口还是用的Mock接口，在store中管理用户状态，这里我们对接一下上节中定义的接口

1、修改axios封装的对象baseURL地址。在开发配置文件那里，修改成自己接口的地址。

 

 2、取消mock数据，在vue.config.js中注释掉使用mock的代码。

 

 3、找到这个登录页，然后看下登陆的逻辑和相关调用代码位置

 

  4、注意到上图的$store了吗，说明这个位置调用了store 的相关方法代码，我们到store文件夹下的user.js看看

 

 5、上图可看出store中的user.js保存了引用了api/user.js中的Login方法，还保存了Token到cookie和vuex中，那我们来看看api/user.js中的真正请求的方法，很简单，发送了一个put请求。

 

6、上图中的login 调用了request里面的方法，再去看看request里面定义了什么

 

 7、上图看到，services实际上就是axios的一个请求通用方法,因为这个值是最后request.js导出的变量。这里的request参数自动添加了token的请求头，再来看看response的规定

 

 8、由上图可看到，response返回的状态20000是成功标志，50008是违法token，50012是其他客户端，50014是token过期。我们的接口是返回的200是成功，那这里改成200就好了。

运行一下发现登陆已经成功了，但是并没有跳转去主页面。主要原因是进入主界面的时候会去判断登录的状态。怎么判断的呢？首先判断token是不是已经存在，以及store.getters.name这个字段是否为空，

代码位置就在promiss.js里面。

 

 9、处理一下token以及store.getters.name的值，接口暂时不做token验证，名称也暂时不反回来，直接处理一下就好。在module/user.js下修改代码

 

 10、再次登录，成功进入