登陆模块（三）-axios-默认配置选项 请求拦截器 响应拦截器

07-axios-默认配置选项

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

• baseURL 请求地址的基准地址

• headers 是对象

  • Authorization 字段
  • 值： Bearer + 空格 + token

代码怎么写：

// 简单配置axios
import axios from 'axios'
// 默认配置  基准地址
axios.defaults.baseURL = 'http://ttapi.research.itcast.cn/mp/v1_0'
// 默认配置  请求头携带token
axios.defaults.headers.Authorization = 'Bearer ' + store.getUser().token
Vue.prototype.$http = axios

现象：

• 当你在做登录的时候，是没有存储token的
• 点击登录后才存储了token, 跳转到了首页
• 首页中法了一个请求，并没有获取到token。
• 刷新一下页面，token就获取成功了。
• 原因：main.js入口文件，在页面初始化的时候执行一次，路由跳转不会重新执行main.js的代码。

方案：

• 在每一次请求前，重新获取token，设置给请求头即可。

08-axios-请求拦截器

把main.js进行axios配置，封装到了api/index.js

// 负责 全局配置axios  提供一个配置好的AXIOS即可。
import axios from 'axios'
import store from '@/store'
// 默认配置1  基准地址
axios.defaults.baseURL = 'http://ttapi.research.itcast.cn/mp/v1_0'
// 默认配置2  请求头携带token
// axios.defaults.headers.Authorization = 'Bearer ' + store.getUser().token
// Vue.prototype.$http = axios

export default axios

• 添加请求拦截器 分析

// 添加请求拦截器  分析
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 加token
    // config 是请求配置  如果你需要额外配置  config进行修改
    // 把修改好的config 返回出去  axios才回使用你修改的配置
    return config;
}, function (error) {
    // 对请求错误做些什么
    // 拦截失败触发  返回promise对象 而且这个失败的promise
    // new Promise() 可能成功可能失败 
    // Promise.reject('错误对象')  失败promise
    // Promise.resolve() 成功promise
    return Promise.reject(error);
});

实现功能：api/index.js

// 配置一个请求拦截器(在每次请求的头部加上一个token)
// 每次发送请求之前 执行拦截器
axios.interceptors.request.use((config) => {
  // 拦截成功
  // 加token
  config.headers.Authorization = 'Bearer ' + store.getUser().token
  return config
}, (err) => {
  // 拦截失败 (成功的业务中出现报错)
  return Promise.reject(err)
})

09-axios-响应拦截器

• token在服务端失效，有有效期（2小时）
• 场景首页：待3小时
  • 发请求获取数据
  • 后台返回错误信息，错误的状态码401，认为本地存储token失效。
  • 跳转到 登录页面 重新登录 获取有效的token。
• 当你每一次发后端给了响应：
  • 判断状态码 401 登录页面 重新登录

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    // 获取响应状态码  判断是否401
    // error.response 响应对象
    // error.response.status 状态码
    return Promise.reject(error);
});

实现功能：api/index.js

// 配置一个响应拦截器（在每次响应失败的时候判断token是否失效）
axios.interceptors.response.use(res => res, err => {
  // err 获取 状态码
  if (err.response.status === 401) {
    // token失效  清除存储token  重新登录
    store.delUser()
    // 登录path 是 '/login'
    // 1. 跳转到登录页面  hash = #/login  使用 location
    // window.location.hash = '#/login'
    // 2. 使用路由来进行跳转
    router.push('/login')
  }
  return Promise.reject(err)
})

流程补充：