一、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、再次登录,成功进入