06-使用axios发送登录请求

使用axios发送登录请求

vue项目实战系列

主要内容：

1. axios的安装
2. 使用axios发送请求
3. vue cli 3.0跨域的设置
4. 在项目中使用YAPI模拟登录接口

1 任务概述

我们在前面已经实现了在表单中输入用户名和密码，点击登录按钮后跳转到主页的功能，而且也在YAPI上设计好了登录接口，接下来的任务是在输入用户名和密码后，点击登录按钮，我们开始发送登录请求，根据接口返回的消息，成功后跳转到主页，用户名密码错误，则打印返回消息，不去跳转。

我们在接口中假设密码输入8个8就返回code位1，msg为“用户名和密码错误！”。

2 axios概述

我们在向后端发送登录请求，接收返回结果时，使用axios组件。

什么是axios？

axios是可以用在浏览器和node.js中的基于promise的HTTP库。

axios特性

• 可以从浏览器中创建XMLHttpRequest

• 可以从node.js中创建http请求

• 支持Promise API

• 拦截请求和响应

• 转换请求和响应数据

• 可以取消请求

• 能够自动转换JSON数据

关于promise

Promise，承诺，一诺千金

Promise是支持异步编程的对象，有all，reject、resolve几个方法，在原型上有then，catch等方法

axios参考网址：

https://github.com/axios/axios

https://www.kancloud.cn/yunye/axios/234845

3 安装axios

在vs code中打开终端窗口，运行如下命令：

npm install axios

输出信息：

PS E:\vue_workspace\gdtrain> npm install axios
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ axios@0.19.0
added 5 packages from 8 contributors and audited 27103 packages in 18.38s
found 0 vulnerabilities

如果出现以上信息，表示安装成功。

4 配置API请求代理

如果你的前端应用和后端API服务器没有运行在同一台主机上，出于安全问题，浏览器会禁止你跨域访问（CORS，Cross origin resource sharing），我们在开发环境下经常会将API请求代理到API服务器，允许跨域访问，这在vue cli3.0以上版本中是通过vue.config.js中的devServer.proxy选项来设置的。

vue cli3.0的配置和以前的版本不同，以前的配置信息是在config/index.js中，从vue cli3.0开始，为了追求零配置，没有了config文件夹，但是我们的项目还是要配置的，这时你需要在项目根目录中（不是src目录，和package.json同级）自己创建vue.config.js文件，加入你自己的配置，不关心的配置可以不必写入，vue会采用默认配置。如果存在vue.config.js文件，vue会自动加载vue.config.js里面的配置来覆盖默认配置。

1）在项目根目录下创建vue.config.js文件

2）在vue.config.js文件中添加如下内容：

module.exports = {
  devServer: {
    proxy: {// API代理
      '/api': {
        // 凡是到/api的请求都会发往下面的地址
        target: 'http://yapi.demo.qunar.com/mock/66031/api',
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }

    }
  }

}

代码说明：

• 此段代码配置了API代理，也就是通常所说的反向代理
• line2：devServer开发环境下的配置
• line3：proxy，API代理
• line4：凡是基础路径是api的请求都会发往line6处的目标url
• line7：这里是关键，配置允许跨域访问
• line8~line9：重写目标url路径

关于’^/api’:’'的设置说明：

当点击登录按钮时，axios会向/login发送请求，为了区分便于服务器区分将请求发往那些代理服务器，axios有一个baseURL附在前面，我们在代码中设置的axios的baseURL是api，此时就变成了向/api/login发送请求，vue开发服务器会基于这个baseURL拦截到请求，然后做代理，此时baseURL的使命已经完成，我们实际请求的是/login,所以在路径重写中把它去掉，^/api是正则表达式表示匹配以/api开头的部分，换成后面引号中的内容，这里相当于删除了请求路径中的/api，即只剩下/login，然后把这个/login附加到目标路径之后，我们的目标路径是：http://yapi.demo.qunar.com/mock/66031/api，添加上/login后，变成实际请求的接口路径，即：http://yapi.demo.qunar.com/mock/66031/api/login。

关于Vue CLI配置的更多参考：

https://cli.vuejs.org/zh/config/#全局-cli-配置

没有配置跨域请求时会在后台出现类型下面的错误

Access to XMLHttpRequest at 'http://yapi.demo.qunar.com/.../api/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

5 引入axios

为了能够在各个组件中全局使用axios，我们需要在main.js中引入axios，并进行必要的设置，比如设置前面提到的baseURL

此时main.js的代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

var axios = require('axios')
axios.defaults.baseURL = '/api'

Vue.config.productionTip = false

Vue.prototype.$axios = axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

代码说明：

• line 6：引入axios
• line7：设置axios发送请求的baseURL，axios所有请求都会在前面添加的url，通常和前面反向代理设置的匹配路径一致
• line11：将axios挂载到vue原型上，各个组件可以直接通过vue实例访问。

6 使用axios发送请求

我们在Login.vue，使用axios发送登录请求，并根据请求结果跳转到主页。下面是Login.vue中的代码：

<template>
  <div>
    <h3>登录系统</h3>用户名：
    <input type="text" v-model="loginForm.userName" placeholder="请输入用户名" />
    <br />密码：
    <input type="password" v-model="loginForm.password" placeholder="请输入密码" />
    <br />
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        userName: '',
        password: ''
      }
    }
  },
  methods: {
    login () {
      console.log(this.loginForm.userName)
      console.log(this.loginForm.password)

      this.$axios.post('/login', {
        userName: this.loginForm.userName,
        password: this.loginForm.password
      })
        .then(resp => {
          if (resp.data.code === 0) {
            console.log(resp.data.user)
            this.$router.replace('/index')
          } else {
            console.log(resp.data.msg)
          }
        })
        .catch(failResponse => { })
    }

  }

}
</script>

<style>
</style>

我们在此处仅修改了login方法（line28~line40），添加了使用axios发送登录请求，根据返回结果进行路由跳转的代码。

代码说明：

• 使用axios的post方法发送请求，响应结果在then方法中处理，如果响应失败在catch中处理
• line28：由于axios已经挂载到了Vue原型之上，这里的this代表vue实例，可以直接访问axios。
• line33：由登录api返回的对象存储在响应对象resp的data中，通过检查code来确定登录是否成功，登录成功则在line34行向控制台输出user对象，并在line35行跳转到用户主页，如果code的值非0，表示登录失败，则在line37行打印登录接口返回的消息
• line33：这里3个等号表示恒等，类型和值都一致。

1 关于axios的post方法：

post方法：axios#post(url[, data[, config]])

第一个参数是请求url，后面根可选的data和config，data是要发送的数据，config是额外的配置信息

下面是指向post请求的一个示例：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2 关于返回的响应结果：

下面是一个响应的数据结构：

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}

返回的数据会放到data中，status存储http状态码，statusText是状态码的描述。

使用 then 时，你将接收下面这样的响应：

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

7 测试运行

在vs code中通过快捷键ctrl+反引号打开终端，输入如下命令：

npm run serve

从浏览器中访问localhost：8080

输入用户名：jerry，密码：8个1后提交：

你可以看到登录成功，并且可以在控制台显示出返回的user对象。

如果输入用户名：jerry，密码：8个8，我们约定的错误密码，则显示如下：

至此，我们登录请求完毕。

8 总结

我们使用axios发送登录请求时，由于是后端使用模拟接口，我们需要在vue.config.js中配置api代理即反向代理，请求成功后我们在axios的then方法中处理返回数据，根据情况跳转到登录主页。

后面的任务，我们将使用element ui把我们的登录页面美化一下。