npm i axios

// 3.1 剥离无效数据  3.2 处理 token 失效

// 4. 导出一个函数，调用当前的 axios 实例发请求，返回值 promise

// 导入 axios

import axios from 'axios'

// 导入 vuex 仓库

import store from '@/store'

// 导入路由

import router from '@/router'

// 导出 baseURL, 原因：其他地方不是通过 axios 发请求的地方用上基准地址

export const baseURL = '地址'

// 1. 创建一个新的 axios 实例

const instance = axios.create({

  //axios 的一些配置，baseURL timeout

  baseUrl,

  timeout:5000

})

// 2. 请求拦截器，如果有 token 进行头部携带

instance.interceptors.request.use(()=>{

  // 拦截业务逻辑

  // 进行请求配置的修改

  // 如果本地有 token 就在头部携带

  // 2.1 获取用户信息对象

  const { profile } = store.state.user

  // 2.2 判断是否有 token

    if (profile.token) {

        // 2.3 设置 token

        config.headers.Authorization = `Bearer ${profile.token}`

    }

},(err)=>{

  // 将错误对象传递进去

  return Promise.reject(err)

})

// 3 响应拦截器：

// 3.1 剥离无效数据：res=>res.data 取出 data 数据，将来调用接口的时候直接拿到的就是后台的数据

instance.interceptors.response.use(res=>res.data,(err)=>{

  // 401 状态码，进入该函数

  // 3.2 处理无效 token

  if(err.response && err.response.status === 401){

    // 3.2.1 清空无效用户信息

    store.commit('user/setUser',{})

    // 3.2.2 跳转到登录页面

      router.push('/login')

    // 3.2.3 跳转需要传参 (当前路由地址) 给登录码

    const fullPath = encodeURIComponent(router.currentRoute.value.fullPath)

    //encodeURIComponent 转换 uri 编码，防止解析地址出问题

    router.push('/login?redirectUrl=' + fullPath)

  }

  return Promise.reject(err)

})

// 请求工具函数

export default (url, method, submitData) => {

  // 负责发请求：请求地址，请求方式，提交的数据

  return instance({

    url,

    method,

    // 1. 如果是 get 请求  需要使用 params 来传递 submitData   ?a=10&c=10

    // 2. 如果不是 get 请求  需要使用 data 来传递 submitData   请求体传参

    // [] 设置一个动态的 key, 写 js 表达式，js 表达式的执行结果当作 KEY

    //method 参数：get,Get,GET  转换成小写再来判断

    // 在对象，['params']:submitData ===== params:submitData 这样理解

    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData

  })

}