登录模块的实现

一.前期的准备工作

1.页面的布局

  (1)表单的校验:

            利用element-ui提供的文档绑定rules规则后实现校验

  (2)跨域的配置 ：

          利用proxy代理来解决跨域的问题

  (3)axios拦截器的配置

  两个点:1. 在请求拦截的成功回调中,如果token,因为调用其它的接口需要token才能调取。

                  在请求头中加入token。

              2.在响应拦截器中进行数据的一层解析: return res .data

                  进行统一错误的处理,返回的状态码是200,但是success的值是false,代表业务的失败。

 (4)环境变量的配置

在根路径准备好生成环境和开发环境的基地址。

baseUrl：process.env获取

(5)在vuex中存储token

按需导入使用第三方库的方法 
import {gettoken,settoken,removetoken} from '第三方库的路径'

satae：

token:gettoken()

mutation

定义方法来获取token



action
定义接口来获取token

(6)定义api接口的封装文件

默认导入
import request from '拦截器文件'

定义方法:
export login(){
  url:'/api地址'
  method：请求的方法
}

(7)点击登录按钮

导入方法
import {login } form '文件的路径'

在表单验证通过后：
调用接口 login().then(res=>{ 
通过 this.$store.dispatch('vuex action方法的模块名字' ，返回回来的token作为实参传递过（res）)
})

这样就获取到了token。

(8)登录后跳转首页的问题

在点击登录按钮之后,会出现

在这个步骤中,通过this.$store.dispatch来出发模块并且调用接口,很显然这个步骤是一个异步的,

如果采用.then的方法,他是一个回调函数

使用then方法,他还是立马执行:
this.$store.push('/')

很明显这是不符合逻辑的,假设我们的业务逻辑的:

action这个模块还没出发,就直接跳转到了首页。

如果解决这个问题？

利用async await即可解决：          

如果 await后面是一个Promise对象,则会等Promise对象返回后面的值在去执行它之后的代码。

如果返回的不是一个Promise,则指向的是代码完成的一个返回值。